best-plus 基于vue3组件库
基于vue3的一个用户体验良好的组件库,支持按需引入和全部导入的方式。 提高开发效率。
目前设计思路:
ui样式采用全局 --> 模块 --> 功能的方式搭建
安装:
// 使用yarn or npm
yarn add best-plus
npm i best-plus
快速开始
import { createApp } from 'vue'
import App from 'App.vue'
import BestPlus from 'best-plus'
import 'best-plus/dist/index.css'
const app = createApp(App)
app.use(BestPlus)
基础组件
button按钮组件
// 按钮类型
<BeButton type="primary" size="small">primary</BeButton>
属性说明:
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
type | 类型按钮 | string | - | primary dashed text link |
size | 尺寸大小 | string | small | mini large |
loading | 加载 | boolean | false | true |
disabled | 禁用 | boolean | false | true |
shape | 形状 | string | round circle | - |
danger | 告警按钮 | boolean | false | true |
input 组件
// 按钮类型
<be-input v-model:value="value" size="small" @input="onInput" />
属性说明:
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
type | 类型 | string | - | text password number |
size | 尺寸 | string | small | mini large |
allowClear | 清空 | boolean | false | true |
disabled | 禁用 | boolean | false | true |
readonly | 只读 | boolean | false | - |
autocomplete | 原生支持 | string | - | - |
事件
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
input | 输入 | ()=>void | - | - |
change | 改变值 | ()=>void | - | - |
blur | 失焦 | ()=>{} | - | - |
inputNumber 组件
// 按钮类型
<be-input-number v-model:value="value" size="small" @input="onInput" />
属性说明:
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
type | 类型 | string | - | number |
size | 尺寸 | string | small | mini large |
allowClear | 清空 | boolean | false | true |
disabled | 禁用 | boolean | false | true |
readonly | 只读 | boolean | false | - |
autocomplete | 原生支持 | string | - | - |
事件
属性 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
input | 输入 | ()=>void | - | - |
change | 改变值 | ()=>void | - | - |
blur | 失焦 | ()=>{} | - | - |