vue自定义表单生成器form-create使用详解 - 行业资讯 - 肥雀云

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

文档| github

演示项目:开源的高品质微信商城
　　

　　<李>可生成任何Vue组件　　<李>自带数据验证　　<李>轻松转换为表单组件　　

　　<李>速度更快李　　<李>体积更小李　　<李>更强大的全局配置李　　<李>自定义组件更容易扩展李　　<李>更容易支持第三方UI库李　　<李>更少的错误李　　　　

通过JSON创建表单

通过API操作表单

　　　　　　　　名称　　说明　　　　　　　　　　@form-create/iview 　　iview版表单生成器　　　　　　@form-create/element-ui 　　element-ui版表单生成器　　　　　　@form-create/核心　　form-create核心包　　　　　　@form-create/跑龙套　　form-create工具包　　　　　　@form-create/数据　　省市区多级联动数据　　　　　　　　

<强>使用
　　

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

安装
　　

　　　　　　npm我@form-create/element-ui 　　　　

挂载
　　

全局注册

　　　　　　进口formCreate形成“@form-create/element-ui”; 　　　　Vue.use (formCreate); 　　之前　　　　

局部挂载

　　　　　　进口formCreate形成“@form-create/element-ui”; 　　　　出口默认{ 　　组件:{ 　　formCreate: formCreaet。美元形式() 　　} 　　} 　　　　

生成表单
　　

　　　　　　& lt; template> 　　& lt; form-create v模型=" $ f”:规则=肮嬖颉盄on-submit=皁nSubmit祝辞& lt;/form-create> 　　& lt;/template> 　　出口默认{ 　　数据(){ 　　返回{//表单实例对象　　$ f: {},//表单生成规则　　规则:[ 　　{ 　　类型:“输入”, 　　:“goods_name”, 　　标题:“商品名称“ 　　}, 　　{ 　　类型:“datePicker”, 　　字段:“created_at ', 　　标题:“创建时间的　　} 　　] 　　}; 　　}, 　　方法:{ 　　alt=" vue自定义表单生成器form-create使用详解">

可以通过$ f快速操作表单,例如:

　　<李> $ f.hidden:隐藏指定组件　　<李> $ f.validate:验证表单李　　<李> $ f.setValue:修改表单组件的值　　<李> $ f.append:追加表单组件　　　　

生成
　　

通过标签生成

　　　　　　{ 　　类型:“el-button”, 　　名称:“btn”, 　　道具:{ 　　类型:“主”, 　　:“btn”, 　　加载:真　　}, 　　孩子们:['加载中'] 　　} 　　　　

通过模板生成

　　　　　　{ 　　类型:“模板”, 　　名称:“btn” 　　模板:' & lt; el-button:加载=凹釉亍痹趝{文本}}& lt; el-button>”, 　　虚拟机:新Vue ({ 　　数据:{ 　　加载:没错, 　　文本:“加载中” 　　} 　　}) 　　} 　　　　

转换为表单组件
　　

自定义组件转换为表单组件后,可通过f.formData美元,美元f.getValue, f.setValue美元,美元f.disabled等方法快速操作组件,达到和内置组件相同的效果

<强>预定义
　　

道具　　

在自定义组件内部通过道具接收一下属性