luckypeng-components
v0.1.0
Published
- 本项目仅作为vue组件封装的练习参考
Downloads
3
Readme
- 本项目仅作为vue组件封装的练习参考
组件
按钮(Button)
| 属性 | 值 | 描述 | | -------- | ---------------- | -------------------------------------------------------------------- | | type | String | 按钮类型:primary,info,success,warning,danger | | plain | Boolean | 是否为朴素按钮,默认为 false | | mimicry | Boolean | 是否为拟态按钮,和 plain 不能同时设置,会被 plain 覆盖。默认为 false | | disabled | Boolean | 是否禁用按钮,默认为 false | | round | Boolean | 是否为圆角按钮,默认为 false | | circle | Boolean | 是否为圆形按钮,默认为 false | | icon | Array 或 Boolean | font-awesome 字体数组,默认为 false |
| 事件 | 值 | 描述 | | ----- | -------- | -------- | | click | Function | 点击事件 |
对话框(Dialog)
| 属性 | 值 | 描述 | | -------- | ------- | ---------------------------------- | | title | String | 对话框头部提示,默认为"提示" | | visiable | Boolean | 对话框可见状态,默认为 false | | mimicry | Boolean | 对话框是否为拟态风格,默认为 false | | width | String | 对话框宽度,默认为 60% | | top | String | 对话框距离顶部位置,默认为 15vh |
| 插槽 | 描述 | | ------ | ----------------------- | | title | Dialog 标题区的内容 | | footer | Dialog 按钮操作区的内容 |
输入框(Input)
| 属性 | 值 | 描述 | | ------------ | ------- | ---------------------------------- | | placeholder | String | 占位符,默认为空字符串 | | type | String | 表单类型,默认为'text' | | mimicry | Boolean | 对话框是否为拟态风格,默认为 false | | name | String | 表单命名,默认为空 | | value | String | 表单值,默认为空字符串 | | disabled | Boolean | 是否禁用,默认为 false | | clearable | Boolean | 是否可清空,默认为 false | | showPassword | Boolean | 是否显示密码可见,默认为 false |
切换(Switch)
| 属性 | 值 | 描述 | | ------------- | ------- | ---------------------------------- | | mimicry | Boolean | 对话框是否为拟态风格,默认为 false | | name | String | 表单命名,默认为空 | | value | String | 表单值,默认为空字符串 | | disabled | Boolean | 是否禁用,默认为 false | | activeColor | String | 激活状态颜色,默认为#dcdfe6 | | inactiveColor | String | 未激化状态颜色,默认为#dcdfe6 |
| 事件 | 值 | 描述 | | ------ | -------- | ---------------------------------- | | change | Function | 状态修改触发事件,返回修改后的状态 |
单选框(Radio)
| 属性 | 值 | 描述 | | ------- | ------------------------- | ---------------------------------- | | label | [String, Number, Boolean] | 单选框 label 值,默认为空字符串 | | mimicry | Boolean | 对话框是否为拟态风格,默认为 false | | name | String | 表单命名,默认为空 | | value | String | 表单值,默认为空字符串 | | color | String | 单选框选择时的颜色,默认为#409eff |
单选框组(RadioGroup)
用于包裹 radio,通过 v-model 指定组内所有的 radio 的 v-model
复选框(Checkbox)
| 属性 | 值 | 描述 | | ------- | ------------------------- | ---------------------------------- | | label | [String, Number, Boolean] | 单选框 label 值,默认为空字符串 | | mimicry | Boolean | 对话框是否为拟态风格,默认为 false | | name | String | 表单命名,默认为空 | | value | String | 表单值,默认为空字符串 | | color | String | 单选框选择时的颜色,默认为#409eff |
复选框组(CheckboxGroup)
用于包裹多个 checkbox,通过 v-model 指定组内所有的 checkout 的 v-model
表单项(Form-item)
| 属性 | 值 | 描述 | | ----- | ------ | ------------------------------- | | label | String | 单选框 label 值,默认为空字符串 |
表单(Form)
| 属性 | 值 | 描述 | | ----------- | ------ | -------------------- | | model | Object | 表单对象,必填 | | label-width | String | 标签宽度,默认"80px" |