form-create2.5版本来了，轻松处理动态表单

form-create是一个表单生成组件，可以通过JSON生成动态渲染、数据采集、验证和提交功能。支持3种UI框架，支持生成任意Vue组件。内置20个常用表单组件和自定义组件，再复杂的表单也能轻松搞定。文档|GitHub|示例支持UIelement-uiiview/view-designant-design-vue新特性2.5版本主要更新几个特性：重构内部核心代码优化内部渲染机制优化内部生命周期事件重构TypeScript新增nextTick方法，设置渲染后回调后，添加支持分页加载组件，加速首屏渲染。添加自定义配置项效果。添加对修改类型的支持。新增支持组件配置前缀和后缀前缀、后缀新增更新配置、新增支持值发送变化后换行配置项、配置FormItem新增对象组件新增支持自定义标题、info组件新增富文本组件wangEditor添加了原生事件支持事件注入，支持value.sync获取双向绑定的formData，优化默认表单提交按钮。根据自己使用的UI，安装对应版本的element-ui。npmi@form-create/element-uiiview@2.x|3.x版本npmi@form-create/iviewiview/view-design@4.x版本npmi@form-create/iview4ant-design-vue@1.5+versionnpmi@form-create/ant-design-VueQuickStart本文以element-ui为例，在main.js中写入如下内容：importVuefrom'vue'importELEMENTfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'importformCreatefrom'@form-create/element-ui'Vue.use(ELEMENT)Vue.use(formCreate)生成表单在线示例exportdefault{data(){return{//实例对象fApi:{},//表单数据值:{},//表单生成规则rule:[{type:'input',field:'goods_name',title:'产品名称'},{type:'datePicker',field:'created_at',title:'创建时间'}],//组件参数配置选项：{//表单提交事件onSubmit:function(formData){alert(JSON.stringify(formData))}}}}规则引入类型类型：String描述：设置生成的组件字段名称类型：String描述：设置表单组件的字段名，自定义组件不可配置title类型：String|Object描述：组件名称value类型：any描述：表单组件的字段值，自定义组件不需要设置props参数：Object描述：设置组件的propsinfo类型：String|Object描述：设置组件的提示信息hidden类型：Bool描述：设置组件是否渲染类型：Array描述：设置radio、select、checkbox等组件option选项col类型：Object描述：设置组件的布局规则控件类型：Object描述：控制其他组件显示子组件类型：Array描述：设置父组件的插槽，默认为default。它可以与插槽配置项一起使用。例1formCreate.maker.create('button').children(['buttoncontent'])例2maker.input('text','text','text').children([maker.create('span').children(['append']).slot('append')])示例3formCreate.maker.create('i-row')。children([formCreate.maker.create('i-col').props('span',12).children([formCreate.maker.template('自定义组件',newVue)]),])功能介绍1.自定义组件form-create支持在form内部生成任意vue组件。在线示例如生成el-button组件：{//type可以是内置组件名也可以是vue组件名或者html标签type:'el-button',//...children:['buttoncontent']}生成html标签{//type可以是内置组件名，也可以是vue组件名或html标签type:'span',//...children:['spancontent']}注意！生成的组件必须全局挂载或通过Vue.component(component.name,component)的form-create挂载；通过表单创建通过formCreate.component(component.name,component);2。定义布局组件的布局可以通过设置配置项col或者grid组件来实现。在线示例通过配置项col设置组件布局，设置一行显示两个组件[{type:'input',field:'input1',title:'input1',col:{span:12}},{type:'input',field:'input2',title:'input2',col:{span:12}},]设置一行显示三个通过网格的组件Component{type:'el-row',children:[{type:'el-col',props:{span:8},children:[{type:'input',field:'input1',title:'input1'}]},{type:'el-col',props:{span:8},children:[{type:'input',field:'input1',title:'input1'}]},{type:'el-col',props:{跨度:8},children:[{type:'input',field:'input1',title:'input1'}]}]}3.组件前缀和后缀通过生成规则的prefix属性配置组件的前缀，suffix属性配置组件的后缀在线示例{type:'input',field:'text',title:'text',prefix:'prefix',suffix:'suffix',}设置前缀和后缀为自定义组件{type:'input',field:'text',title:'text',value:'default',prefix:{type:'ElButton',children:['prefix']},suffix:{type:'ElButton',children:['suffix']},}4.通过控件配置实现组件联动物品。通过组件的值控制其他组件是否显示在线示例，例如当评分低于3星时，输入差评原因{type:'rate',field:'star',title:'rating',value:5,control:[{handle(val){returnval<3},rule:[{type:'input',field:'info',title:'差评原因',value:'默认信息',}]}]}参数说明类型value当组件的值等于值时在规则中显示componentstring\Number\Boolhandle当handle方法返回true时在规则中显示组件。Functionrule该组件控制显示组件Arrayappend设置规则中规则追加的位置stringprepend设置规则中规则预插入的位置stringchild设置规则是否插入到指定位置的子项中，即添加到当前的子项中默认规则Boolean注意！handle的优先级大于该值，所有满足条件的Control都会生效5.表单验证可以通过validate配置项设置组件的验证规则，自定义表单组件也支持验证。在线示例如设置输入组件required{type:'input',//...validate:[{required:true,type:'string',message:'Pleaseentersomething'}]}参数说明类型默认值enum枚举类型string-len字段长度number-max最大长度number-消息验证copystring-min最小长度number-pattern正则表达式验证RegExp-requiredismandatorybooleanfalsetransformtransformfieldvaluebeforevalidationfunction(value)=>transformedValue:any-type内置验证类型，可选string'string'validator自定义验证函数(rule,value,callback)-需要空格，空格是否会被认为是错误booleanfalse注意！type需要根据组件的值类型来定义。覆盖方式，未定义字段会被设置为nulltypecoverValue=(formData:{[field:string]:any})=>voidUsage:fApi.coverValue({goods_name:'HuaWei'})合并方式，未定义字段无修改接口setValue{(formData:{[field:string]:any}):void(field:string,value:any):void}用法：fApi.setValue({goods_name:'HuaWei'})别名方法changeValue,changeField隐藏字段我interfacehidden{//隐藏所有组件(status:Boolean):void//隐藏指定组件(status:Boolean,field:string):void//隐藏部分组件(status:Boolean,field:string[]):void}用法：fApi.hidden(true,'goods_name')获取组件隐藏状态类型hiddenStatus=(field:string)=>Boolean用法：conststatus=fApi.hiddenStatus('goods_name')获取规则接口getRule{(field:string):Rule(field:string,origin:true):FormRule}用法：construle=fApi.getRule('goods_name')insertrulepre-insertinterfaceprepend{//插入到第一个(rule:FormRule):void//Insertbeforethespecifiedfield(rule:FormRule,field:string):void//插入到指定字段children(rule:FormRule,field:string,child:true):void}Usage:fApi.prepend({type:"input",title:"产品介绍",field:"goods_info",value:"",props:{"type":"text","placeholder":"请输入产品介绍",},validate:[{required:true,message:'请输入产品介绍n',trigger:'blur'},],},'goods-name')interfaceappend{//插入最后一个(rule:FormRule):void//插入手指Afterthespecifiedfield(rule:FormRule,field:string):void//插入到指定字段children(rule:FormRule,field:string,child:true):void}Usage:fApi.append({type:"input",title:"产品介绍",field:"goods_info",value:"",props:{"type":"text","placeholder":"请输入产品介绍",},validate:[{required:true,message:'Pleaseenteraproductintroduction',trigger:'blur'},],},'goods-name')删除指定规则类型removeRule=(rule:FormRule)=>FormRuleusage:construle={type:'input',/**...**/}fApi.removeRule(rule)验证表单类型validate=(callback:(...args:any[])=>void)=>void用法：fApi.validate((valid,fail)=>{if(valid){//todo表单验证通过}else{//todo表单验证失败}})验证指定字段类型validateField=(field,callback:(...args:any[])=>void)=>void用法：fApi.validateField('goods_name',(valid,fail)=>{if(valid){//todo字段验证通过}else{//todo字段验证失败}})获取表单数据接口formData{//获取所有数据():{[field:string]:any}//获取部分字段的数据(field:string[]):{[field:string]:any}}Usage:constformData=fApi.formData()修改提交按钮类型submitBtnProps=(props:Object)=>void用法：fApi.submitBtnProps({disabled:true})快捷操作：fApi.btn.loading(true)设置提交按钮进入加载状态fApi.btn.disabled(true)设置提交按钮禁用状态fApi.btn.show(true)设置提交按钮的显示状态修改重置按钮类型resetBtnProps=(props:Object)=>void用法：fApi.resetBtnProps({disabled:true})快捷操作：fApi.resetBtn.loading(true)设置重置按钮进入加载状态fApi.resetBtn.disabled(true)设置重置按钮禁用状态fApi.resetBtn.show(true)设置重置按钮显示状态hideformtypehideForm=(hide:Boolean)=>voidusage:fApi.hideForm(true)提交表单类型submit=(success:(formData:FormData,$f:fApi)=>void,fail:($f:fApi)=>void)=>voidUsage:fApi.submit((formData,fapi)=>{//todo提交表单},()=>{//todo表单验证失败})