0.1.1 • Published 3 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组件使用