1.0.12 • Published 2 years ago
best-plus v1.0.12
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 | 失焦 | ()=>{} | - | - |