使⽤Vue动态⽣成form表单
form-create 表单⽣成器
具有数据收集、校验和提交功能的表单⽣成器，⽀持双向数据绑定和事件扩展，组件包含有复选框、单选框、输⼊框、下拉选择框等表单元素以及省市区三级联动，时间选择,⽇期选择，颜⾊选择，滑块，评分，框架,⽂件/图⽚上传等功能组件。详细查看:
如果对您有帮助，您可以在Github点右上⾓ "Star" ⽀持⼀下谢谢！
⽰例
1.2 版本重⼤更新
内部结构优化
新增规则⽣成器$formCreate.maker
新增滑块、评分组件
优化⽂件上传组件
修复上传组件⽆法验证等问题
安装
npm install form-create
OR
git clone github/xaboy/form-create.git
cd form-create
npm install
引⼊
<!-- import Vue -->
<script src="node_modules/vue/dist/vue.min.js"></script>
<!-- import iview -->
<link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css">
<script src="node_modules/iview/dist/iview.min.js"></script>
<!-- 省市区三级联动json数据 -->
<script src="/district/province_city_area.js"></script>
<!-- 模拟数据 -->
<script src="mock.js"></script>
<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>
注意! iview版本为2.13.0,Vue版本为2.5.*
使⽤
let rules = k;
new Vue({
mounted:function(){
let $f = this.$formCreate(mock,
{
onSubmit:function (formData) {
console.log(formData);
$f.submitStatus({loading:true});
}
});
//动态添加表单元素
$f.append($r,'goods_name');
}
})
$formCreate 参数
rules 表单⽣成规则 [inputRule,selectRule,...]
options 初始化配置参数 (详细见底部 createOptions)
$formCreate.maker 组件规则⽣成器
除hidden外，其他配置⽅式全部相同.详细参考
props,event,slot传⼊参数为对象，例({key:value,...})
validate,options参⼊参数为数组，例([options,options,..])
hidden ⽣成隐藏字段
$formCreate.maker.hidden(field,value)
input ⽣成input输⼊框
$formCreate.maker.input(title,field,value)
radio ⽣成单选框
checkbox ⽣成复选框
select ⽣成select选择器
switch ⽣成switch开关
datepicker ⽣成⽇期选择器组件，别名date
timepicker ⽣成时间选择器组件，别名time
inputnumber ⽣成数字输⼊框，别名number
colorpicker ⽣成颜⾊选择器组件，别名color
cascader ⽣成多级联动组件
upload ⽣成上传组件
rate ⽣成评分组件
slider ⽣成滑块组件
$f 实例⽅法
formData() 获取表单的value
getValue(field) 获取指定字段的value
changeField(field,value) 修改指定字段的value
resetFields() 重置表单
destroy() 销毁表单
removeField(field) 删除指定字段
fields() 获得表单所有字段名称
submit() 表单验证通过后提交表单，触发onSubmit事件
validate(successFn,errorFn) 表单验证，如果验证通过执⾏successFn，未通过则执⾏errorFn
validateField(field,callback) 表单验证指定字段
$f.validateField(field,(errMsg)=>{
if(errMsg){
//TODO 验证未通过
}else{
//TODO 验证通过
}
});
prepend(rule,field = undefined) 在field的字段之前输⼊指定表单元素，不传⼊field默认在第⼀个$f.prepend({
type:"input",
title:"商品简介",
field:"goods_info",
value:"",
props: {
"type": "text",
"placeholder": "请输⼊商品简介",
},
validate:[
{ required: true, message: '请输⼊商品简介', trigger: 'blur' },
],
});
append(rule,field = undefined) 在field的字段之前输⼊指定表单元素，不传⼊field默认在最后⼀个$f.append({
type:"input",
title:"商品简介",
field:"goods_info",
value:"",
props: {
"type": "text",
"placeholder": "请输⼊商品简介",
},
validate:[
{ required: true, message: '请输⼊商品简介', trigger: 'blur' },
],
});
submitStatus(props) 修改表单提交按钮状态
$f.submitStatus({
//按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
type:"primary",
//按钮⼤⼩，可选值为large、small、default或者不设置
size:"large",
//按钮形状，可选值为circle或者不设置
shape:undefined,
/
/开启后，按钮的长度为 100%
long:true,
//设置button原⽣的type，可选值为button、submit、reset
htmlType:"button",
//设置按钮为禁⽤状态
disabled:false,
//设置按钮的图标类型
icon:"ios-upload",
//按钮⽂字提⽰
innerText:"提交",
//设置按钮为加载中状态
loading:false
})
btn.loading() 让表单提交按钮进⼊loading状态
btn.finish() 让表单提交按钮恢复正常状态
rules 表单元素规则
hidden 隐藏字段
hiddenRule:
{
type:"hidden",//必填!
//字段名称
field:"id", //必填!
/
/input值
value:"14" //必填!
}
input 输⼊框
{
type:"input",//必填!
//label名称
title:"商品名称",//必填!
//字段名称
field:"goods_name",//必填!
//input值
value:"iphone 7",
props: {
//输⼊框类型，可选值为 text、password、textarea、url、email、date
"type": "text", //必填!
//是否显⽰清空按钮
"clearable":false,
//设置输⼊框为禁⽤状态
"disabled": false,
//设置输⼊框为只读
"readonly": false,
//⽂本域默认⾏数，仅在 textarea 类型下有效
"rows": 4,
//⾃适应内容⾼度，仅在 textarea 类型下有效，可传⼊对象，如 { minRows: 2, maxRows: 6 }            "autosize": false,
//将⽤户的输⼊转换为 Number 类型
"number": false,
//⾃动获取焦点
"autofocus": false,
//原⽣的⾃动完成功能，可选值为 off 和 on
"autocomplete": "off",
//占位⽂本
"placeholder": "请输⼊商品名称",
//输⼊框尺⼨，可选值为large、small、default或者不设置
"size": "default",
//原⽣的 spellcheck 属性
"spellcheck": false,
},
event:{
//按下回车键时触发
enter:(event)=>{},
//设置 icon 属性后，点击图标时触发
click:(event)=>{},
//数据改变时触发
change:(event)=>{},
/
/输⼊框聚焦时触发
focus:(event)=>{},
//输⼊框失去焦点时触发
blur:(event)=>{},
//原⽣的 keyup 事件
keyup:(event)=>{},
//原⽣的 keydown 事件
keydown:(event)=>{},
//原⽣的 keypress 事件
keypress:(event)=>{},
},
validate:[
{ required: true, message: '请输⼊goods_name', trigger: 'blur' },
],
}
validate 表单验证规则，具体配置查看 :
radio 单选框
radioRule :
{
type:"radio",//必填!
//label名称
title:"是否包邮",//必填!
/
/字段名称
field:"is_postage",//必填!
//input值
value:"0",
//可选参数
options:[
{value:"0",label:"不包邮",disabled:false},
{value:"1",label:"包邮",disabled:true},
],//必填!
props: {
//可选值为 button 或不填，为 button 时使⽤按钮样式
"type":undefined,
//单选框的尺⼨，可选值为 large、small、default 或者不设置
"size":"default",
//是否垂直排列，按钮样式下⽆效
"vertical":false,
},
event:{
//在选项状态发⽣改变时触发，返回当前状态。通过修改外部的数据改变时不会触发
change:(...arg)=>{},
},
validate:[],
}
checkbox 复选框
checkboxRule :
{
type:"checkbox",//必填!
//label名称
title:"标签",//必填!
//字段名称
field:"label",//必填!
//input值
value:[
"1","2","3"
],
//可选参数
options:[
{value:"1",label:"好⽤",disabled:true},
{value:"2",label:"⽅便",disabled:false},
{value:"3",label:"实⽤",disabled:false},
{value:"4",label:"有效",disabled:false},
props: {
//多选框组的尺⼨，可选值为 large、small、default 或者不设置
"size":"default",
},
event:{
//只在单独使⽤时有效。在选项状态发⽣改变时触发，通过修改外部的数据改变时不会触发
change:(...arg)=>{},
},
validate:[],
}
select 选择器
selectRule :
{
type: "select",//必填!
field: "cate_id",//必填!
title: "产品分类",//必填!
//input值
value: ["104","105"],
//可选参数
options: [
{"value": "104", "label": "⽣态蔬菜", "disabled": false},
{"value": "105", "label": "新鲜⽔果", "disabled": false},
],//必填!
props: {
//是否⽀持多选
"multiple": true,
//是否可以清空选项，只在单选时有效
"clearable": false,
//是否⽀持搜索
"filterable": true,
// 暂不⽀持远程搜索
// "remote": false, //是否使⽤远程搜索
// "remote-method":Function, //远程搜索的⽅法
// "loading": false, //当前是否正在远程搜索
// "loading-text": "加载中", //远程搜索中的⽂字提⽰
//选择框⼤⼩，可选值为large、small、default或者不填
"size":"default",
//选择框默认⽂字
"placeholder": "请选择",
//当下拉列表为空时显⽰的内容
"not-found-text": "⽆匹配数据",
//弹窗的展开⽅向，可选值为 bottom 和 top
"placement": "bottom",
//是否禁⽤
"disabled": false,
},
event:{
/
/选中的Option变化时触发，返回 value
change:(checked)=>{},
//搜索词改变时触发
'query-change':(keyword)=>{},
},
validate:[],
}
switch 开关
switchRule :
{
type:"switch",//必填!
/
/label名称
title:"是否上架",//必填!
//字段名称
field:"is_show",//必填!
//input值
value:"1",
props: {
//开关的尺⼨，可选值为large、small、default或者不写。建议开关如果使⽤了2个汉字的⽂字，使⽤ large。
"size":"default",
//禁⽤开关
"disabled":false,
//选中时的值，当使⽤类似 1 和 0 来判断是否选中时会很有⽤
"trueValue":"1",
//没有选中时的值，当使⽤类似 1 和 0 来判断是否选中时会很有⽤
"falseValue":"0",
},
slot: {
//⾃定义显⽰打开时的内容
open:"上架",
//⾃定义显⽰关闭时的内容
close:"下架",
},
event:{
//开关变化时触发，返回当前的状态 0 | 1
change:(bool)=>{},
},
validate:[],
}
DatePicker ⽇期选择器
DatePickerRule :
{
type: "DatePicker",//必填!
field: "section_day",//必填!
title: "活动⽇期",//必填!
//input值, type为daterange,datetimerange value为数组 [start_value,end_value]
value: ['2018-02-20', new Date()],
props: {
//显⽰类型，可选值为 date、daterange、datetime、datetimerange、year、month
"type": "datetimerange",//必填!
//展⽰的⽇期格式
"format": "yyyy-MM-dd HH:mm:ss",
//⽇期选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end            "placement": "bottom-start",
"placeholder":"请选择获得时间",
//是否显⽰底部控制栏，开启后，选择完⽇期，选择器不会主动关闭，需⽤户确认后才可关闭
"confirm":false,
//尺⼨，可选值为large、small、default或者不设置
"size":"default",
//是否禁⽤选择器
"disabled":false,
//是否显⽰清除按钮
"clearable":true,
//完全只读，开启后不会弹出选择器
"readonly":false,
//⽂本框是否可以输⼊
"editable":false,
},
event:{
//⽇期发⽣变化时触发，已经格式化后的⽇期，⽐如 2016-01-01
change:(value)=>{},
//弹出⽇历和关闭⽇历时触发 true | false
'open-change':(bool)=>{},
//在 confirm 模式或 clearable = true 时有效，在清空⽇期时触发
clear:(...arg)=>{},
},
validate:[],
}
TimePicker 时间选择器
TimePickerRule :
{
type: "TimePicker",//必填!
field: "section_time",//必填!
title: "活动时间",//必填!
//input值, type为timerange value为数组 [start_value,end_value]
value: [],
props: {
//显⽰类型，可选值为 time、timerange
"type": "timerange", //必填!
/
/展⽰的时间格式
"format": "HH:mm:ss",
//下拉列表的时间间隔，数组的三项分别对应⼩时、分钟、秒。例如设置为 [1, 15] 时，分钟会显⽰：00、15、30、45。
"steps": [],
//时间选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end            "placement": "bottom-start",
//占位⽂本
"placeholder":"请选择获得时间",
//是否显⽰底部控制栏，开启后，选择完⽇期，选择器不会主动关闭，需⽤户确认后才可关闭
"confirm":false,
//尺⼨，可选值为large、small、default或者不设置
"size":"default",
//是否禁⽤选择器
html表单只能输入数字"disabled":false,
//是否显⽰清除按钮
"clearable":true,
//完全只读，开启后不会弹出选择器
"readonly":false,
//⽂本框是否可以输⼊
"editable":false,
},
event:{
/
/时间发⽣变化时触发已经格式化后的时间，⽐如 09:41:00
change:(checked)=>{},
//弹出浮层和关闭浮层时触发 true | false
'open-change':(bool)=>{},
//在清空⽇期时触发
clear:(...arg)=>{},
},
validate:[],
}
InputNumber 数字输⼊框
InputNumberRule :
{
type: "InputNumber",//必填!
field: "sort",//必填!
title: "排序",//必填!
//input值
value: 1,
props: {
//最⼤值
"max": undefined,
//最⼩值
"min": undefined,
/
/每次改变的步伐，可以是⼩数
"step": 1,
//输⼊框尺⼨，可选值为large、small、default或者不填
"size":"default",
//设置禁⽤状态
"disabled":false,
//是否设置为只读
"readonly":false,
//是否可编辑
"editable":true,
//数值精度
"precision":0,
},
event:{
//数值改变时的回调，返回当前值
change:(value)=>{},
//聚焦时触发
focus:(event)=>{},
//失焦时触发
blur:(event)=>{},
},
validate:[],
}
ColorPicker 颜⾊选择器
ColorPickerRule :

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。