秦州建设网站,网站写作赚钱,wordpress 栏目模板,免费虚拟主机网站介绍form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件#xff0c;再复杂的表单都可以轻松搞定。文档 | github演示项目: 开源的高品质微信商城功能自定义组件可生…介绍form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件再复杂的表单都可以轻松搞定。文档 | github演示项目: 开源的高品质微信商城功能自定义组件可生成任何Vue组件自带数据验证轻松转换为表单组件通过 JSON 生成表单通过 Maker 生成表单强大的API可快速操作表单双向数据绑定事件扩展局部更新数据验证栅格布局内置组件17种常用表单组件对比 1.x速度更快体积更小更强大的全局配置自定义组件更容易扩展更容易支持第三方 UI 库更少的 bug示例通过 JSON 创建表单通过 API 操作表单form-create包说明名称说明form-create/iviewiview 版表单生成器form-create/element-uielement-ui 版表单生成器form-create/coreform-create 核心包form-create/utilsform-create 工具包form-create/data省市区多级联动数据使用以element-ui版本为例介绍如何在项目中使用 form-create安装npm i form-create/element-ui挂载全局注册import formCreate form form-create/element-ui;Vue.use(formCreate);局部挂载import formCreate form form-create/element-ui;export default {components:{formCreate:formCreaet.$form()}}生成表单export default {data () {return {//表单实例对象$f:{},//表单生成规则rule:[{type:input,field:goods_name,title:商品名称},{type:datePicker,field:created_at,title:创建时间}]};},methods:{onSubmit(formData){//TODO 提交表单}}};效果实例对象 $f可以通过 $f 快速操作表单例如$f.hidden隐藏指定组件$f.validate验证表单$f.setValue修改表单组件的值$f.append追加表单组件自定义组件生成通过标签生成{type:el-button,name: btn,props:{type:primary,field:btn,loading:true},children:[加载中]}通过模板生成{type:template,name:btntemplate:{{text}},vm: new Vue({data:{loading:true,text:加载中}})}转换为表单组件自定义组件转换为表单组件后可通过$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作组件达到和内置组件相同的效果预定义props在自定义组件内部通过props接收一下属性value 表单的值disabled 组件的禁用状态例如:vm Vue({props:{value:String,disabled:Boolean}})input 事件通过input事件更新组件内部的值当组件值发生变化后,通过 input 事件更新值.例如:vm.$emit(input,newValue);挂载自定义组件要生成的自定义组件必须通过Vue.component方法挂载到全局,或者通过formCreate.component方法挂载例如:formCreate.component(TestComponent,component);或者Vue.component(TestComponent,component);生成表单组件必须定义field属性JSON{type:TestComponent,value:test,field:testField,title:自定义组件}MakerformCreate.maker.create(TestComponent,testField,自定义组件).value(test)示例自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同formCreate.maker.template(计数器-{{num}}, new Vue({props:{//预定义disabled:Boolean,value:Number,},data: function () {return {num: this.value,}},watch:{value(n){this.num n;}},methods: {onClick: function () {this.num;//更新组件内部的值this.$emit(input,this.num);},},}), tmp, 自定义 title).value(100).props(disabled,false)完整示例以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持。