• 本项目仅作为vue组件库封装的练习参考

• 初始化vue项目 vue created demo

• 安装组件库 npm i houui 或者： yarn add houi

• 全局导入 import HouUI form 'houui' import 'houui/dist/houui.css'

  Vue.use(HouUI)

  UI组件库使用

button组件：

参数支持

                                                 | 参数名 | 参数描述 | 参数类型 | 默认 | | -------- | ------------------------------------------------------- | -------- | ------- | | type | 按钮类型  (primary / success / warning / danger / info) | string | default | | plain | 是否是朴素按钮 | boolean | false | | round | 是否是圆角按钮 | boolean | false | | circle | 是否是圆形按钮 | boolean | false | | disabled | 是否禁用按钮 | boolean | false | | icon | 图标类名 | string | 无 |

方法

| 事件名 | 说明 | | ------ | -------- | | click | 点击回调 |

使用方法

 <lm-button @click="buttonClick" disabled>default</lm-button>
 <lm-button type="info">info</lm-button>
 <lm-button type="success">success</lm-button>
 <lm-button type="danger">danger</lm-button>
 <lm-button type="primary">primary</lm-button>
 <lm-button type="warning">warning</lm-button>

dialog组件

参数支持

| 参数名 | 参数描述 | 参数类型 | 默认值 | | ------- | -------------------------------- | -------- | ------ | | title | 对话框标题 | string | 提示 | | width | 宽度 | string | 50% | | top | 与顶部的距离 | string | 15vh | | visible | 是否显示dialog（支持sync修饰符） | boolean | false |

方法

| 事件名 | 事件描述 | | ------ | ---------------- | | opened | 模态框显示的事件 | | closed | 模态框关闭的事件 |

插槽说明

| 插槽名称 | 插槽描述 | | -------- | ------------------ | | default | dialog的内容 | | title | dialog的标题 | | footer | dialog的底部操作区 |

使用方法

 <lm-button @click="visible = true">展示dialog</lm-button>
 <lm-dialog title="提示" :visible.sync="visible">
   我是内容
   <template v-slot:footer>
     <lm-button>取消</lm-button>
     <lm-button type="primary">确定</lm-button>
   </template>
 </lm-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 | 获取的焦点事件 |

使用方法

 <lm-input v-model="username" placeholder="请输入用户名"></lm-input>

switch组件

参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | ------------- | -------------------- | -------- | ------- | | v-model | 双向绑定 | 布尔类型 | false | | name | name属性 | string | text | | activeColor | 自定义的激活的颜色 | string | #3872F0 | | inactiveColor | 自定义的不激活的颜色 | string | #5582C2 |

方法

       | 事件名称 | 事件描述 | | -------- | ------------------ | | change | change时触发的事件 |

使用方法

  <lm-switch v-model="active"></lm-switch>

radio组件

参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | --------------- | ------------------- | ------ | | v-model | 双向绑定 | 布尔类型 | false | | label | 单选框的value值 | string，num,boolean | ' ' | | name | name属性 | string |

使用方法

 <lm-radio label="1" v-model="gender">男</lm-radio>
 <lm-radio label="0" v-model="gender">女</lm-radio>

radio-group组件

使用radio组件的缺点，需要给每个组件都丙丁v-model，可以使用radio-group包裹

使用方法

<lm-radio-group v-model="gender">
    <lm-radio label="1">男</lm-radio>
    <lm-radio label="0">女</lm-radio>
</lm-radio-group>

checkbox组件

参数支持

| 参数名称 | 参数描述 | 参数类型 | 默认值 | | -------- | --------------- | ------------------- | ------ | | v-model | 双向绑定 | 布尔类型 | false | | label | 单选框的value值 | string，num,boolean | ' ' | | name | name属性 | string |

使用方法

<lm-checkbox v-model="checked">是否选中</lm-checkbox>

checkboxGroup组件

使用checkbox-group组件包裹checkbox

使用方法

 <lm-checkbox-group v-model="hoby">
    <lm-checkbox label="香蕉"></lm-checkbox>
    <lm-checkbox label="苹果"></lm-checkbox>
    <lm-checkbox label="火龙果"></lm-checkbox>
  </lm-checkbox-group>

form组件

使用方法

 <lm-form :model="formData" label-with="100px">
    <lm-form-item label="用户名">
      <lm-input placeholder="请输入用户名" name="username"></lm-input>
    </lm-form-item>
  </lm-form>