0.1.1 • Published 2 years ago
whale-ui-core v0.1.1
$\color{red} WHALE-UI组件库 $
- 全局导入
import WhaleUI form 'whale-ui-core'
import 'one-ui/lib/one.css'
Vue.use(OneUI)1.button组件
属性
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | 按钮类型（default primary success info warning danger） | String | default |
| plain | 是否是朴素按钮 | Boolean | false |
| round | 是否是圆角按钮 | Boolean | false |
| circle | 是否是圆形按钮 | Boolean | false |
| disabled | 是否禁用按钮 | Boolean | false |
| icon | 图标类名 | String | / |
事件
| 事件名 | 描述 |
|---|---|
| click | 点击事件 |
2.dialog组件
- 属性
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 对话框提示 | String | 提示 |
| width | 宽度 | String | 50% |
| visible | 是否显示对话框（支持async） | Boolean | false |
| top | 距离顶部的距离 | String | 15vh |
事件
| 事件名 | 描述 |
|---|---|
| opened | 对话框显示事件 |
| closed | 对话框关闭事件 |
插槽说明
| 插槽名称 | 描述 |
|---|---|
| default | Dialog 的内容 |
| title | Dialog标题 |
| footer | Dialog 按钮操作区的内容 |
3.input组件
属性
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| placeholder | 占位符 | String | / |
| type | 文本类型（type/password） | String | text |
| disabled | 禁用 | Boolean | false |
| clearable | 是否显示清空按钮 | Boolean | false |
| show-password | 是否显示密码切换按钮 | Boolean | false |
| name | name属性 | String | / |
| width | 长度 | String | 100% |
- 事件
| 事件名 | 描述 |
|---|---|
| blur | 失去焦点事件 |
| change | 内容改变事件 |
| focus | 获取焦点事件 |
4.switch组件
属性
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 双向绑定 | 布尔类型 | false |
| name | name属性 | string | text |
| activeColor | 自定义的激活颜色 | string | #1ec63b |
| inactiveColor | 自定义的不激活颜色 | string | #dd001b |
事件
事件名 描述 change change时触发的事件