houui

• 本项目仅作为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>