xq-vue-ui

xq-ui

简介

一套 Vue UI 组件

使用

1. 安装

npm i xq-vue-ui

2. 全局注册

import xqUI from 'xq-vue-ui'
Vue.use(xqUI)

3. 导入样式

import 'xq-vue-ui/dist/xq-ui.css'

---

组件

按钮(Button)

属性	值	描述
type	String	按钮类型：primary,info,success,warning,danger
plain	Boolean	是否为朴素按钮，默认为 false
disabled	Boolean	是否禁用按钮，默认为 false
round	Boolean	是否为圆角按钮，默认为 false
circle	Boolean	是否为圆形按钮，默认为 false
icon	Array 或 Boolean	font-awesome 字体数组，默认为 false

事件	值	描述
click	Function	点击事件

---

对话框(Dialog)

属性	值	描述
title	String	对话框头部提示，默认为"提示"
visible	Boolean	对话框可见状态，默认为 false
width	String	对话框宽度，默认为 60%
top	String	对话框距离顶部位置，默认为 15vh

插槽	描述
title	Dialog 标题区的内容
footer	Dialog 按钮操作区的内容

---

输入框(Input)

属性	值	描述
placeholder	String	占位符，默认为空字符串
type	String	表单类型，默认为'text'
name	String	表单命名，默认为空
value	String	表单值，默认为空字符串
disabled	Boolean	是否禁用，默认为 false
clearable	Boolean	是否可清空，默认为 false
showPassword	Boolean	是否显示密码可见，默认为 false

切换(Switch)

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

---

单选框(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

---

表单项(Form-item)

属性	值	描述
label	String	单选框 label 值，默认为空字符串

表单(Form)

属性	值	描述
model	Object	表单对象，必填
label-width	String	标签宽度，默认"80px"

---