1.0.13 • Published 4 years ago
hzz-form v1.0.13
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 -Squick 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).