clover-blessing-ui

npm install clover-blessing

//集成了 https://icons.getbootstrap.com/?spm=5176.28103460.0.0.5e045d27gj0IsS 图标库
//使用方式
<i class="bi bi-gear-wide"></i>

• main文件下

//引入组件   支持按需引入
//import { cloverInput } from 'clover-blessing'
import CloverBlessing from 'clover-blessing'
//引入样式文件
import 'clover-blessing/style.css'
//全局注册
app.use(CloverBlessing)
//单独注册
app.use(cloverInput)

clover-blessing

UI框架详情

• 技术栈：vue3 + ts + vite
• 邮箱：[email protected]

输入框

  <CloverInput v-model="datas" :isForm="true" placeholder="请输入..." />

CloverInput API

| 属性名称 | 类型 | 使用详情 | 默认值 | |-------------|---------|--------------------------------------------------------------|-------| | size | string | 可选值： small | medium | large | small | | placeholder | string | 占位符 | 请输入 | | disabled | boolean | 是否禁用 | false | | clearable | boolean | 是否可以清除 | true | | type | string | 输入框类型，可选值：text | number | password | textarea | text | |

按钮

  <CloverButton type="warning" :plain="true" size="medium" @click="()=>{console.log(data)}">按钮</CloverButton>

CloverButton API

| 属性名称 | 类型 | 使用详情 | 默认值 | |-------|---------|-----------------------------------------------------|-------| | size | string | 可选值： small | medium | large | xlarge | small | | plain | boolean | 是否是朴素按钮 | false | | type | string | 可选值：primary | danger | success | warning | info | info |