ls-ccomponent

简介

一个 Vue 组件

使用

1. 安装

npm i HUI

2. 全局注册

import HUI from 'HUI'
Vue.use(HUI)

3. 按需导入

import HUI, { Button, Form } from 'HUI'
Vue.use(HUI, {
  components: [Button, Form]
})

组件

按钮(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 | | width | String | 对话框宽度，默认为 60% | | top | String | 对话框距离顶部位置，默认为 15vh |

输入框(Input)

| 属性 | 值 | 描述 | | ------------ | ------- | ---------------------------------- | | placeholder | String | 占位符，默认为空字符串 | | type | String | 表单类型，默认为'text' | | name | String | 表单命名，默认为空 | | value | String | 表单值，默认为空字符串 | | disabled | Boolean | 是否禁用，默认为 false |

切换(Switch)

| 属性 | 值 | 描述 | | ------------- | ------- | ---------------------------------- | | name | String | 表单命名，默认为空 | | value | String | 表单值，默认为空字符串 | | disabled | Boolean | 是否禁用，默认为 false | | activeColor | String | 激活状态颜色，默认为#dcdfe6 | | inactiveColor | String | 未激化状态颜色，默认为#dcdfe6 |

| 事件 | 值 | 描述 | | ------ | -------- | ---------------------------------- | | change | Function | 状态修改触发事件，返回修改后的状态 |

单选框(Radio)

| 属性 | 值 | 描述 | | ------- | ------------------------- | ---------------------------------- | | label | [String, Number, Boolean] | 单选框 label 值，默认为空字符串 | | name | String | 表单命名，默认为空 | | value | String | 表单值，默认为空字符串 | | color | String | 单选框选择时的颜色，默认为#409eff |

单选框组(RadioGroup)

用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model

复选框(Checkbox)

| 属性 | 值 | 描述 | | ------- | ------------------------- | ---------------------------------- | | label | [String, Number, Boolean] | 单选框 label 值，默认为空字符串 | | name | String | 表单命名，默认为空 | | value | String | 表单值，默认为空字符串 | | color | String | 单选框选择时的颜色，默认为#409eff |

复选框组(CheckboxGroup)

用于包裹多个 checkbox，通过 v-model 指定组内所有的 checkout 的 v-model