vue3-ui

vue3 组件库，文档：https://yyge.top/vue3-ui/

安装

npm

npm install @felibrary/vue3-ui

yarn

yarn add @felibrary/vue3-ui

pnpm

pnpm add @felibrary/vue3-ui

用法

全局注册

import { createApp } from 'vue';

import Vue3UI from '@felibrary/vue3-ui';

import App from './App.vue';

const app = createApp(App);
app.use(Vue3UI);

按需引入

// ...
import { V3Button, V3Card } from '@felibrary/vue3-ui';

app.use(V3Button);
app.use(V3Card);

在组件中使用

<template>
	<v3-button>按钮</v3-button>
</template>

本地开发

# 安装依赖
pnpm install
# 编写&预览组件文档
pnpm serve
# 打包组件
pnpm build:lib
# 打包组件文档
pnpm build:docs

进度

组件	简介	功能	单元测试	文档
Icon	图标	✅	✅	✅
Button	按钮	✅	✅	✅
ButtonGroup	按钮组	✅	✅	✅
Input	输入框	✅	✅	✅
InputNumber	数字输入框	✅	✅	✅
InputTextarea	多行文本输入框	✅	✅	✅
Radio	单选框	✅	✅	✅
RadioButton	按钮形式的单选框	✅	✅	✅
RadioGroup	单选框组	✅	✅	✅
Checkbox	复选框	✅	✅	✅
CheckboxButton	按钮形式的复选框	✅	✅	✅
CheckboxGroup	复选框组	✅	✅	✅
DemoBlock	案例展示框	✅	✅	✅
Row	栅格系统-行	✅	✅	✅
Col	栅格系统-列	✅	✅	✅
Message	消息框	✅	✅	✅
Tag	标签	✅	✅	✅
Select	下拉选项	✅	✅	✅
Backdrop	遮罩层	✅	✅	✅
Dialog	弹窗	✅	✅	✅
Switch	开关	✅	✅	✅
Tooltip	工具提示	✅	✅	✅
Popover	弹出窗口	✅	✅	✅
Divider	分割线	✅	✅	✅
Space	间隔组件	✅	✅	✅
Badge	徽标	✅	✅	✅
Loading	加载中	✅	✅	✅
Card	卡片	✅	✅	✅
BasePopper	基础的悬浮窗	✅	✅	✅
PopConfirm	气泡确认框	✅	✅	✅
Slider	滑块	✅	✅	✅
ProgressLinear	进度条	✅	✅	✅
ProgressCircular	进度环	✅	✅	✅
Carousel	轮播图	✅	✅	✅
Drawer	抽屉	✅	✅	✅
Back	返回	✅	✅	✅
Image	图片	✅	✅	✅
Tab	标签页	✅	✅	✅
Table	表格	✅	✅	✅
Upload	上传	✅	✅	✅
Tree	树形控件	✅	✅	✅
Watermark	水印	✅	✅	✅