form-create

npm JS gzip size

具有动态渲染、数据收集、校验和提交功能的表单生成器，动态生成Form表单。支持双向数据绑定和事件扩展，组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。

Github | Gitee | Npm | form-create 文档

本项目还在不断开发完善中,如有建议或问题请在这里提出

1.3 版本重大更新

优化和精简内部结构
支持双向数据绑定!!!
支持全局方法快速创建表单
新增 option.mounted事件，当组件加载完成后触发
修复一些BUG

示例代码

[外链图片转存失败(img-9WaH7m0h-1563496700162)(https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg)]

安装

npm install form-create

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install

引入

浏览器:

<!-- import Vue 2.5.16-->
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script><!-- import iview 2.14.3-->
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.13.0/styles/iview.css">
<script src="https://cdn.bootcss.com/iview/2.13.0/iview.min.js"></script><!-- 省市区三级联动json数据,不使用三级联动不需要引入 -->
<script src="district/province_city_area.js"></script><!-- 模拟数据,实际使用中不需要引入 -->
<script src="demo/mock.js"></script><!-- import formCreate -->
<script src="dist/form-create.min.js"></script>

NodeJs:

//三级联动数据,不使用三级联动不需要引入
import 'form-create/district/province_city_area.js'
//示例规则,实际使用中不需要引入
import 'form-create/mock.js'
import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import formCreat from 'form-create'
Vue.use(iView);
Vue.use(formCreat)

注意! iview版本为2.14.3,Vue版本为2.5.*

使用

//示例规则
let rules = window.mock;
new Vue({data:{formData:{}    },mounted:function(){let root = document.getElementById('app'),that = this;$f = this.$formCreate(mock,{el:root,onSubmit:function (formData) {console.log(formData);//提交状态$f.btn.loading();//点击状态//$f.btn.finish();//创建第二个表单$f2 = that.$formCreate(mock,root);}});//动态添加表单元素$f.append($r,'goods_name');//绑定表单数据到formData$f.model(this.formData);}
})

$formCreate 表单生成器参数

rules 表单生成规则:Array [inputRule,selectRule,…],可使用$formCreate.maker 快速生成规则
options 初始化配置参数:Object (详细见底部 createOptions)

$formCreate.maker 组件规则生成器

除hidden外,其他配置方式全部相同.详细参考表单元素规则

props,event,slot传入参数为对象,例({key:value,…})

validate,options传入参数为数组,例([options,options,…])

model(obj,field = ‘’) 将在组件绑定到obj.field ，field为空默认时为rule.field

$formCreate.maker指的是 vue内部的 this.$formCreate.maker 或者 window.formCreate.maker

hidden 生成隐藏字段

$formCreate.maker.hidden(field,value)

input 生成input输入框

$formCreate.maker.input(title,field,value)

radio 生成单选框

$formCreate.maker.radio(title,field,value)

checkbox 生成复选框

$formCreate.maker.radio(title,field,value) //value为array类型

select 生成select选择器

$formCreate.maker.select(title,field,value) //多选是value为array类型

switch 生成switch开关

$formCreate.maker.switch(title,field,value)

datepicker 生成日期选择器组件,别名date

$formCreate.maker.date(title,field,value) //type为daterange或datetimerange时 value为array类型

timepicker 生成时间选择器组件,别名time

$formCreate.maker.time(title,field,value) //type为timerange时 value为array类型

inputnumber 生成数字输入框,别名number

$formCreate.maker.number(title,field,value)

colorpicker 生成颜色选择器组件,别名color

$formCreate.maker.color(title,field,value)

cascader 生成多级联动组件`

$formCreate.maker.cascader(title,field,value) //value为array类型

upload 生成上传组件`

$formCreate.maker.upload(title,field,value)

rate 生成评分组件`

$formCreate.maker.rate(title,field,value)

slider 生成滑块组件`

$formCreate.maker.rate(title,field,value) //props range为true时 value为array类型

frame 生成框架组件`

$formCreate.maker.frame(title,field,value)

$f 实例方法

formData() 获取表单的value
getValue(field) 获取指定字段的value
model(obj) 绑定表单组件到obj对象，支持双向数据绑定。结构{field:{value,rule:{props,validate,options,slot,event}}}

当修改后没有生效时请尝试用vm.$set方法修改

changeField(field,value) 修改指定字段的value
resetFields() 重置表单
destroy() 销毁表单
removeField(field) 删除指定字段
fields() 获得表单所有字段名称
closeModal() 关闭frame组件的弹出框
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($formCreate.maker.upload('产品主图','logo','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg').props({"action": "","maxLength": 1,"multiple": false,"type": "select","uploadType": "image","name": "file","onSuccess": function () {return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';}}).validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'}),'goods_name');

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、resethtmlType:"button",//设置按钮为禁用状态disabled:false,//设置按钮的图标类型icon:"ios-upload",//按钮文字提示innerText:"提交",//设置按钮为加载中状态loading:false})

btn.loading() 让表单提交按钮进入loading状态
btn.finish() 让表单提交按钮恢复正常状态

rules 表单元素规则

hidden 隐藏字段

maker快速生成:

$formCreate.maker.hidden('id','14');

原始参数:

hiddenRule:
{type:"hidden",//必填!//字段名称field:"id", //必填!//input值value:"14" //必填!
}

input 输入框

规则说明

maker快速生成:

$formCreate.maker.input("商品名称","goods_name","iphone 7").props({clearable:true,placeholder: "请输入商品名称"
}).validate([{ required: true, message: '请输入goods_name', trigger: 'blur' },
]);

原始参数:

inputRule :
{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' },],}

radio 单选框

规则说明

maker快速生成:

$formCreate.maker.radio("是否包邮","is_postage","0").options([{value:"0",label:"不包邮",disabled:false},{value:"1",label:"包邮",disabled:true},
]);

原始参数:

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 复选框

规则说明

maker快速生成:

$formCreate.maker.checkbox("标签","label",["1","2","3"]).options([{value:"1",label:"好用",disabled:true},{value:"2",label:"方便",disabled:false},{value:"3",label:"实用",disabled:false},{value:"4",label:"有效",disabled:false},
]);

原始参数:

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 选择器

规则说明

maker快速生成:

$formCreate.maker.select("产品分类","cate_id",["104","105"]).options([{"value": "104", "label": "生态蔬菜", "disabled": false},{"value": "105", "label": "新鲜水果", "disabled": false},
]);

原始参数:

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变化时触发，返回 valuechange:(checked)=>{},//搜索词改变时触发'query-change':(keyword)=>{},},validate:[],}

switch 开关

规则说明

maker快速生成:

$formCreate.maker.switch("是否上架","is_show","1").options([{"value": "104", "label": "生态蔬菜", "disabled": false},{"value": "105", "label": "新鲜水果", "disabled": false},
]).slot({open:"上架",close:"下架"}).props({"trueValue":"1","falseValue":"0"});

原始参数:

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 | 1change:(bool)=>{},},validate:[],}

DatePicker 日期选择器

规则说明

maker快速生成:

$formCreate.maker.date("活动日期","section_day",['2018-02-20', new Date()]).props({"type": "datetimerange","placeholder":"请选择活动日期",
});

原始参数:

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-01change:(value)=>{},//弹出日历和关闭日历时触发 true | false'open-change':(bool)=>{},//在 confirm 模式或 clearable = true 时有效，在清空日期时触发clear:(...arg)=>{},},validate:[],}

TimePicker 时间选择器

规则说明

maker快速生成:

$formCreate.maker.time("活动时间","section_time",[]).props({"type": "timerange","placeholder":"请选择活动时间",
});

原始参数:

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",//是否禁用选择器"disabled":false, //是否显示清除按钮"clearable":true, //完全只读，开启后不会弹出选择器"readonly":false, //文本框是否可以输入"editable":false, },event:{//时间发生变化时触发 已经格式化后的时间，比如 09:41:00change:(checked)=>{},//弹出浮层和关闭浮层时触发 true | false'open-change':(bool)=>{},//在清空日期时触发clear:(...arg)=>{},},validate:[],}

InputNumber 数字输入框

规则说明

maker快速生成:

$formCreate.maker.number("排序","sort",1).props({"type": "timerange","precision":0,
});

原始参数:

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 颜色选择器

规则说明

maker快速生成:

$formCreate.maker.color("颜色","color",'#ff7271').props({"format":"hex"
});

原始参数:

ColorPickerRule :
{type: "ColorPicker",//必填!field: "color",//必填!title: "颜色",//必填!//input值value: '#ff7271', props: {//是否支持透明度选择"alpha": false, //是否支持色彩选择"hue": true, //是否显示推荐的颜色预设"recommend": false, //尺寸，可选值为large、small、default或者不设置"size":"default", //自定义颜色预设"colors":[], //颜色的格式，可选值为 hsl、hsv、hex、rgb,开启 alpha 时为 rgb，其它为 hex"format":"hex", },event:{//当绑定值变化时触发，返回当前值change:(color)=>{},//聚焦时触发 面板中当前显示的颜色发生改变时触发'active-change':(color)=>{},},validate:[],}

Cascader 多级联动

规则说明

maker快速生成:

$formCreate.maker.cascader("所在区域","address",['陕西省','西安市','新城区']).props({data:window.province,placeholder:'请选择所在区域',
});

原始参数:

CascaderRule:
{type:"cascader",//必填!title:"所在区域",//必填!field:"address",//必填!//input值value:['陕西省','西安市','新城区'],props:{//可选项的数据源，格式参照示例说明data:window.province || [],//必填!//选择后展示的函数，用于自定义显示格式renderFormat:label => label.join(' / '),//是否禁用选择器disabled:false,//是否支持清除clearable:true,//输入框占位符placeholder:'请选择',//次级菜单展开方式，可选值为 click 或 hovertrigger:'click',//当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例changeOnSelect:false,//输入框大小，可选值为large和small或者不填size:undefined,//动态获取数据，数据源需标识 loadingloadData:()=>{},//是否支持搜索filterable:false,//当搜索列表为空时显示的内容notFoundText:'无匹配数据',//是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果transfer:false,},event:{//选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据change:(value, selectedData)=>{},//展开和关闭弹窗时触发'visible-change':bool=>{}},validate:[],}

Upload 上传

规则说明

maker快速生成:

$formCreate.maker.upload("轮播图","pic",['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg']).props({"action": "","maxLength": 1,"multiple": false,"type": "select","uploadType": "image","name": "file","onSuccess": function () {return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';}
}).validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'});

原始参数:

UploadRule :
{type: "Upload",//必填!field: "pic",//必填!title: "轮播图",//必填!//input值,当maxLength等与1时值为字符串,大于1时值为数组value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值props: {//上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）"type":"select", //必填!//上传文件类型，可选值为 image（图片上传），file（文件上传）"uploadType":"image", //必填!//上传的地址"action": "", //必填!//上传的文件字段名"name":"", //上传时附带的额外参数"data":{}, //设置上传的请求头部"headers": {}, //是否支持多选文件"multiple": true,//支持发送 cookie 凭证信息"withCredentials":false, //不支持// "showUploadList":false, //是否显示已上传文件列表// "defaultFileList":[], // 默认已上传的文件列表//接受上传的文件类型"accept":"",//支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用"format":[], //文件大小限制，单位 kb"maxSize":undefined, //可上传文件数量"maxLength":1,//上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传"beforeUpload":()=>{}, //文件上传时的钩子，返回字段为 event, file, fileList"onProgress":()=>{}, //文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可"onSuccess":function () {return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';}, //必填!//文件上传失败时的钩子，返回字段为 error, file, fileList"onError":(error, file, fileList)=>{}, //点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据"onPreview":()=>{}, //文件列表移除文件时的钩子，返回字段为 file, fileList"onRemove":()=>{}, //文件格式验证失败时的钩子，返回字段为 file, fileList"onFormatError":()=>{}, //文件超出指定大小限制时的钩子，返回字段为 file, fileList"onExceededSize":()=>{}, //辅助操作按钮的图标 ,设置为false将不显示handleIcon:'ionic',//点击辅助操作按钮事件onHandle:(src)=>{},//是否可删除,设置为false是不显示删除按钮allowRemove:true,},}

Slider 滑块

规则说明

maker快速生成:

$formCreate.maker.slider('滑块','slider',[0,52]).props({"min": 0,"max": 100,"showTip":"always","range": true});

原始参数:

SliderRule :
{type:"slider",field:"slider",title:"滑块",value:[0,50], //滑块选定的值。普通模式下，数据格式为数字，在双滑块模式下，数据格式为长度是2的数组，且每项都为数字props:{"min": 0, //最小值"max": 100, //最大值"step": 1, //步长，取值建议能被（max - min）整除"disabled": false, //是否禁用滑块"range": true, //是否开启双滑块模式"showInput":false, //是否显示数字输入框，仅在单滑块模式下有效"showStops":true, //是否显示间断点，建议在 step 不密集时使用"showTip":"hover", //提示的显示控制，可选值为 hover（悬停，默认）、always（总是可见）、never（不可见）"tipFormat":undefined, //Slider 会把当前值传给 tip-format，并在 Tooltip 中显示 tip-format 的返回值，若为 null，则隐藏 Tooltip"inputSize":"small", //数字输入框的尺寸，可选值为large、small、default或者不填，仅在开启 show-input 时有效},event:{//在松开滑动时触发，返回当前的选值，在滑动过程中不会触发change:(value)=>{},//滑动条数据变化时触发，返回当前的选值，在滑动过程中实时触发input:(value)=>{},},validate:[]}

Rate 评分

规则说明

maker快速生成:

$formCreate.maker.rate('推荐级别','rate',2).props({"count": 10,"allowHalf": false}).validate({required:true,type:'number',min:3, message: '请大于3颗星',trigger:'change'});

原始参数:

RateRule :
{type:"rate",field:"rate",title:"推荐级别",value:3.5,props:{"count": 10, //star 总数"allowHalf": true, //是否允许半选"disabled": false, //是否只读，无法进行交互"showText": true, //是否显示提示文字"clearable": true, //是否可以取消选择},event:{//评分改变时触发change:(value)=>{},},validate:[{required:true,type:'number',min:3, message: '请大于3颗星',trigger:'change'}]
}

Frame 框架

规则说明

maker快速生成:

maker.frame('素材','fodder',["http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg"]).props({src:"iframe.html",maxLength:2,type:"image"}).validate([{required:true, type: 'array', min: 2, message: '请选择2张图片', trigger: 'change'}]).event({remove:()=>{return false;}
})

原始参数:

FrameRule :
{type:"frame",title:"素材",field:"fodder",value:["http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg"],props:{type:"image", //frame类型,有input,file,imagesrc:"iframe.html", //iframe地址maxLength:2, //value的最大数量icon:'folder', //打开弹出框的按钮图标height:"220px", //弹出框高度width:"350px", //弹出框宽度spin:false, //是否显示加载动画title:"请选择", //弹出框标题handleIcon: true, //操作按钮的图标 ,设置为false将不显示,设置为true为默认的预览图标,类型为file时默认为false,image类型默认为trueallowRemove:true, //是否可删除,设置为false是不显示删除按钮},event:{change:()=>{console.log('change')}, //value改变时触发open:()=>{console.log('open')}, //打开弹出层回调ok:()=>{console.log('ok')}, //点击确定时的回调handle:undefined, //点击操作按钮事件,默认为图片预览remove:()=>{return false;} //点击删除按钮事件,返回false将不删除},validate:[{required:true, type: 'array', min: 5, message: '请选择5张图片', trigger: 'change'}],}

全局配置 createOptions

{//插入节点,默认document.bodyel:null,//form配置form:{//是否开启行内表单模式inline:false,//表单域标签的位置，可选值为 left、right、toplabelPosition:'right',//表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值labelWidth:125,//是否显示校验错误信息showMessage:true,//原生的 autocomplete 属性，可选值为 off 或 onautocomplete:'off',},//文件上传全局配置upload:{//上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传beforeUpload:()=>{},//文件上传时的钩子，返回字段为 event, file, fileListonProgress:(event, file, fileList)=>{},//文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可onSuccess:(response, file, fileList)=>{// return 'filePath';},//文件上传失败时的钩子，返回字段为 error, file, fileListonError:(error, file, fileList)=>{},//点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据onPreview:(file)=>{},//文件列表移除文件时的钩子，返回字段为 file, fileListonRemove:(file, fileList)=>{},//文件格式验证失败时的钩子，返回字段为 file, fileListonFormatError:(file, fileList)=>{},//文件超出指定大小限制时的钩子，返回字段为 file, fileListonExceededSize:(file, fileList)=>{},//辅助操作按钮的图标 ,设置为false将不显示handleIcon:'ios-eye-outline',//点击辅助操作按钮事件onHandle:(src)=>{},//是否可删除,设置为false是不显示删除按钮allowRemove:true,},//表单提交事件onSubmit:(formData)=>{},//提交按钮配置,设置为false时不显示按钮submitBtn:{//按钮类型，可选值为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、resethtmlType:"button",//设置按钮为禁用状态disabled:false,//设置按钮的图标类型icon:"ios-upload",//按钮文字提示innerText:"提交",//设置按钮为加载中状态loading:false,}
}

form-builder PHP现代化表单生成器

动态生成form表单，不在为表单烦恼相关推荐

使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
layui -- autoForm 模块(动态生成表单,非官网模块)
动态生成form表单的需求可用, formTemplate.html 和 autuform.js 在同级目录 ,使用方式如下创建 autoform文件夹 formTemplate.html 和 au ...
vue 给checkbox 赋值_Vue动态生成el-checkbox点击无法赋值的解决方法
前言最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的例如: 定义 ...
数据结构和算法：（3）3.2.1单链表的整表创建
对于顺序存储结构的线性表的整表创建,我们可以用数组的初始化来直观理解.(因为之前说过我们线性表的顺序存储结构呢事实上也就是在数组的基础上加多一个变量来存储当前线性表的长度构成的一个结构,所以我们用数组 ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
发票自动识别功能前端开发(多表单动态生成)
一.先上效果图(全部代码见文章尾部) 二.整体思路上面部分是v-for遍历生成走马灯的item标签(el-carousel-item),el-form放在每个标签里面去动态生成. 底部是自己写的一个 ...
html5 前端动态加载后端,Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导关键配置 template中,form和form-item的写法和绑定 data里的 ...
通过表单设计器动态生成数据库表以及动态查询的功能实现
表单设计器动态生成数据库表以及动态查询的功能实现前言 1. 功能实现 1.1 效果说明 1.2 功能流程图 1.3 具体后端实现 1.4 实现效果 2. 尾声前言前两天安排了作为Java小码农的 ...

动态生成form表单，不在为表单烦恼

form-create

本项目还在不断开发完善中,如有建议或问题请在这里提出

1.3 版本重大更新

示例代码

安装

引入

使用

$formCreate 表单生成器参数

$formCreate.maker 组件规则生成器

$f 实例方法

rules 表单元素规则

hidden 隐藏字段

input 输入框

radio 单选框

checkbox 复选框

select 选择器

switch 开关

DatePicker 日期选择器

TimePicker 时间选择器

InputNumber 数字输入框

ColorPicker 颜色选择器

Cascader 多级联动

Upload 上传

Slider 滑块

Rate 评分

Frame 框架

全局配置 createOptions

动态生成form表单，不在为表单烦恼相关推荐

最新文章

热门文章

动态生成form表单，不在为表单烦恼

form-create

本项目还在不断开发完善中,如有建议或问题请在这里提出

1.3 版本重大更新

示例 代码

安装

引入

使用

$formCreate 表单生成器参数

$formCreate.maker 组件规则生成器

$f 实例方法

rules 表单元素规则

hidden 隐藏字段

input 输入框

radio 单选框

checkbox 复选框

select 选择器

switch 开关

DatePicker 日期选择器

TimePicker 时间选择器

InputNumber 数字输入框

ColorPicker 颜色选择器

Cascader 多级联动

Upload 上传

Slider 滑块

Rate 评分

Frame 框架

全局配置 createOptions

动态生成form表单，不在为表单烦恼相关推荐

最新文章

热门文章

示例代码