0.1.1 • Published 4 years ago
duanUI
npm install duan-ui
import duanUI from 'duan-ui'
import 'duan-ui/dist/duan-ui.css'
Vue.use(duanUI)
前面需要加 duan
例 : <duan-button />
button组件
参数支持
| 参数名 | 参数描述 | 参数类型 | 默认值 |
|---|
| type | 按钮类型(primary / success / warning / danger / info) | string | default |
| plain | 是否是朴素按钮 | boolean | false |
| round | 是否是圆角按钮 | boolean | false |
| circle | 是否是圆形按钮 | boolean | false |
| disabled | 是否禁用按钮 | boolean | false |
| icon | 支持图标(edit / star / search / check / message / delete / close /chakan) | string | 无 |
| size | 按钮大小 (medium / small / mini) | string | 无 |
事件支持
dialog组件
参数支持
| 参数名 | 参数描述 | 参数类型 | 默认值 |
|---|
| title | 对话框标题 | string | 提示 |
| width | 宽度 | string | 50% |
| top | 与顶部的距离 | string | 15vh |
| visible | 是否显示dialog（支持sync修饰符） | boolean | false |
事件支持
| 事件名 | 事件描述 |
|---|
| opened | 模态框显示的事件 |
| closed | 模态框关闭的事件 |
插槽说明
| 插槽名称 | 插槽描述 |
|---|
| default | dialog的内容 |
| title | dialog的标题 |
| footer | dialog的底部操作区 |
input组件
参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| placeholder | 占位符 | string | 无 |
| type | 文本框类型(text/password) | string | text |
| disabled | 禁用 | boolean | false |
| clearable | 是否显示清空按钮 | boolean | false |
| show-password | 是否显示密码切换按钮 | boolean | false |
| name | name属性 | string | 无 |
事件支持
| 事件名称 | 事件描述 |
|---|
| blur | 失去焦点事件 |
| change | 内容改变事件 |
| focus | 获取的焦点事件 |
switch组件
参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| v-model | 双向绑定 | 布尔类型 | false |
| name | name属性 | string | text |
| activeColor | 自定义的激活的颜色 | string | |
| inactiveColor | 自定义的不激活的颜色 | string | |
事件支持
| 事件名称 | 事件描述 |
|---|
| change | change时触发的事件 |
radio组件 / checkbox组件
参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| v-model | 双向绑定 | 布尔类型 | false |
| label | 单选框的value值 | string，num,boolean | '' |
| name | name属性 | string | |
radio-group组件 / checkbox-group组件
使用radio组件的缺点，需要给每个组件都绑定v-mode,可以使用radio-group包裹
form组件 / form-item组件
form组件用来管理表单组件,配合form-item组件使用