0.1.2 • Published 5 years ago
will-ui
如何使用
vue create demo
npm i @will1123/will-ui
import WillUi from '@will1123/will-ui'
import "@will1123/will-ui/dist/will-ui.css";
Vue.use(WillUi)
组件
Will-button
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| type | 类型 | string | primary / success / warning / danger / info | —— |
| plain | 是否朴素按钮 | boolean | true / false | false |
| round | 是否圆角按钮 | boolean | true / false | false |
| circle | 是否圆形按钮 | boolean | true / false | false |
| disabled | 是否禁用状态 | boolean | true / false | false |
| icon | 图标类名 font-awesome 库 | string | —— | —— |
Will-input
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| v-model | 绑定值 | string | —— | —— |
| placeholder | 输入框占位文本 | string | —— | —— |
| clearable | 是否可清空 | boolean | true / false | false |
| show-password | 是否显示切换密码图标 | boolean | true / false | false |
| disabled | 是否禁用状态 | boolean | true / false | false |
Will-switch
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| v-model | 是否选中 | boolean | —— | —— |
| name | 原生 name 属性 | string | —— | —— |
| activeColor | switch 打开时的背景色 | string | —— | #409eff |
| show-inactiveColor | switch 关闭时的背景色 | string | —— | dcdfe6 |
| @change | change 事件 | function | —— | —— |
Will-dialog
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| title | Dialog 的标题，也可通过具名 slot 为 title 的 template 传递 | string | —— | 提示 |
| width | Dialog 的宽度 | string | —— | 50% |
| top | Dialog CSS 中的 margin-top 值 | string | —— | 15vh |
| visible | 是否显示 Dialog，支持 .sync 修饰符 | boolean | true / false | false |
Will-checkbox
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| label | 选中状态的值（只有在 checkbox-group 时有效）,不传递匿名 slot 时 显示 label | string | —— | —— |
| name | 原生 name 属性 | string | —— | —— |
| v-model | 不使用 Will-checkbox-group 时是否勾选 | boolean | true / false | false |
Will-checkbox-group
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| v-model | 存放选中的 checkbox 的 label 数据 | Array | —— | —— |
| @change | change 事件 | function | —— | —— |
Will-radio
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| label | Radio 的 value | string | —— | —— |
| name | 原生 name 属性 | string | —— | —— |
| v-model | 绑定值 与 label 一致时选中 | —— | —— | —— |
| @change | change 事件 | function | —— | —— |
Will-radio-group
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| v-model | 存放选中的 radio 的 label 数据 | String | —— | —— |
Will-form
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| model | 表单数据对象 | object | —— | —— |
| label-width | 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 | string | —— | —— |
Will-form-item
| 参数 | 说明 | 类型 | 可选 | 默认 |
|---|
| label | 表单域标签的内容 | String | —— | —— |
方法
\$loading
| 参数 | 说明 | 类型 | 参数 | 默认 |
|---|
| showLoading | 显示 loading 加载框 | function | 传递对象其中 content 为显示内容 mask 为是否防止穿透 | {content:'',mask:false} |
| hideLoading | 隐藏 loading 加载框 | function | —— | —— |
\$tost
| 参数 | 说明 | 类型 | 参数 | 默认 |
|---|
| showTost | 显示 tost 提示框 | function | 传递对象其中 content 为显示内容 mask 为是否防止穿透 time 为显示时长（毫秒） | {content:'',mask:false,time:3000} |
| hideTost | 隐藏 tost 提示框 | function | —— | —— |