vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单

摘要：

put事件更新组件内部的值当组件值发生变化后,通过input事件更新值.例如:vm.$emit('input',newValue); 挂载自定义组件要生成的自定义组件必须通过Vue.component方法挂载到全局,或者通过formCreate.component方法挂载例如:formCreate.component('TestComponent',com

介绍

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

hildren:["加载中"]} 通过模板生成{type:"template",name:"btn"template:"

功能

自定义组件

建时间"}]};},methods:{onSubmit(formData){//TODO提交表单}}}; 效果实例对象$f可以通过$f快速操作表单，例如：$f.hidden：隐藏指定

可生成任何Vue组件

自带数据验证

轻松转换为表单组件

通过 JSON 生成表单

;).value("test") 示例自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同formCreate.maker.template("

通过 Maker 生成表单

odel="$f":rule="rule"@on-submit="onSubmit">exportdefault{dat

强大的API，可快速操作表单

或者Vue.component("TestComponent",component); 生成表单组件必须定义field属性JSON{type:"TestC

双向数据绑定

te安装npmi@form-create/element-ui 挂载全局注册importformCreateform"@form-create/element-ui";Vue

事件扩展

态例如:vm=Vue({props:{value:String,disabled:Boolean}}) input事件通过input事件更新组件内部的值当组件值发生变化后,通过input事件

局部更新

全局配置自定义组件更容易扩展更容易支持第三方UI库更少的bug示例通过JSON创建表单 通过API操作表单 @form-create包说明名称说明@form-create/ivie

数据验证

l-button:loading="loading">{ {text}}",vm:newVue({data:{loading:true,text:'

栅格布局

;input",this.num);},},}),"tmp","自定义title").value(100).props("disabled",f

内置组件17种常用表单组件

指定组件$f.validate：验证表单$f.setValue：修改表单组件的值$f.append：追加表单组件自定义组件生成通过标签生成{type:"el-button",name:

对比 1.x

速度更快

;el-button@click="onClick"long:disabled="disabled">计数器-{ {num}}",newVue({pro

体积更小

ata(){return{//表单实例对象$f:{},//表单生成规则rule:[{type:"input",field:"goods_name",title:'

更强大的全局配置

tComponent",value:"test",field:"testField",title:"自定义组件"} Makerform

自定义组件更容易扩展

ue.use(formCreate); 局部挂载importformCreateform"@form-create/element-ui";exportdefault{com

更容易支持第三方 UI 库

事件更新值.例如:vm.$emit("input",newValue); 挂载自定义组件要生成的自定义组件必须通过Vue.component方法挂载到全局,或者通过formC

更少的 bug

iewiview版表单生成器@form-create/element-uielement-ui版表单生成器@form-create/coreform-create核心包@form-create/uti

示例

通过 JSON 创建表单

通过 API 操作表单

@form-create包说明

名称说明

@form-create/iview

@form-create/element-ui

@form-create/core

form-create 核心包

@form-create/utils

form-create 工具包

@form-create/data

省市区多级联动数据

使用

以element-ui版本为例介绍如何在项目中使用 form-create

e:"btn",props:{type:"primary",field:"btn",loading:true},children:["加载中

安装

npm i @form-create/element-ui

ate("TestComponent","testField","自定义组件").value("test") 示例自定义计数器

d:Boolean,value:Number,},data:function(){return{num:this.value,}},watch:{value(n){this.num=n;}},meth

档 | github演示项目: 开源的高品质微信商城功能自定义组件可生成任何Vue组件自带数据验证轻松转换为表单组件通过JSON生成表单通过Maker生成表单强大的API

"input",newValue); 挂载自定义组件要生成的自定义组件必须通过Vue.component方法挂载到全局,或者通过formCreate.component方法挂

lue:"test",field:"testField",title:"自定义组件"} MakerformCreate.maker.creat

表单$f.setValue：修改表单组件的值$f.append：追加表单组件自定义组件生成通过标签生成{type:"el-button",name:"btn",prop

{value:String,disabled:Boolean}}) input事件通过input事件更新组件内部的值当组件值发生变化后,通过input事件更新值.例如:vm.$emit(

ods:{onSubmit(formData){//TODO提交表单}}}; 效果实例对象$f可以通过$f快速操作表单，例如：$f.hidden：隐藏指定组件$f.validate：验证表单

"]} 通过模板生成{type:"template",name:"btn"template:"

mCreate.component方法挂载例如:formCreate.component("TestComponent",component); 或者Vue.componen

rmCreate.maker.create("TestComponent","testField","自定义组件").value("test

rops:{//预定义disabled:Boolean,value:Number,},data:function(){return{num:this.value,}},watch:{value(n){

挂载

全局注册

39;商品名称"},{type:"datePicker",field:"created_at",title:"创建时间"}]};},method

import formCreate form "@form-create/element-ui";

Vue.use(formCreate);

ate("TestComponent","testF