clover-blessing

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
• 邮箱：[e-mail]

输入框

  <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