hzz-form

基于element-ui封装的通用表单，包含以下功能点：

1、支持传入model生成表单，提供配置项

2、支持正则校验和错误提示

3、支持自定义表单样式

4、如有其他需要，自由修改

version

|版本号|描述| |:-|:-| |1.0.0|初始版本，仅支持input textarea select和文本| |1.0.3|1、增加datepicker；2、支持传入按钮事件| |1.0.4|1、增加radio| |1.0.6|1、select下拉选框校验触发事件改为change| |1.0.7|1、增加cascader级联选择器；2、扩展列表项属性，支持属性见element-ui；3、提供部分默认配置信息，可通过传入bind进行覆盖| |1.0.9|1、增加日期和时间选择器；| |1.0.11|1、增加开关；2、提供表单项右侧附加信息(单位、按钮)|

install

npm i hzz-form -S

quick start

import hzzForm from 'hzz-form';
Vue.use(hzzForm);

attributes

|参数|说明|类型|默认值| |:-|:-|:-|:-| |labelWidth|标签宽度|string|60px| |data|表单各项值对象|object|-| |model|表单模板对象|array|-|

model attrubites

|参数|说明|类型|默认值|可选值| |:-|:-|:-|:-|:-| |label|标签文本|string|-|-| |prop|关联data存储该项的值|string|-|-| |type|表单类型|string|-|见下表| |required|是否必填|boolean|false|-| |exp|用于校验的正则|string|-|-| |error|错误信息|string|-|-| |bind|列表属性对象，可传入属性见element-ui|object|-|-| |options|type==='select'时有效，存储下拉选项内容|array|-|-| |btns|type==='btns'时有效，存储按钮内容|array|-|-|

type attribute

|可选值|说明| |:-|:-| |select|下拉选框| |cascader|级联选择器| |radio|按钮框组| |time year month date dates week datetimedatetimerang daterange monthrange|日期和时间选择器| |switch|开关| |btns|按钮| |div|文本| |slot|插槽| |textarea和其他原生 input的type值|输入框|

author

If you have any question. You can contract me with QQ(1321176618).