0.5.0 • Published 3 years ago
本项目仅作为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 | 无 |
方法
使用方法
<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>