介绍

Form-create是一个表单生成器，可以通过JSON生成动态渲染、数据收集、验证和提交。并且支持任何Vue组件的生成。结合内置的17个常见表单组件和自定义组件，即使是复杂的表单也可以轻松处理。

文档| github

示范项目：开源优质微信商城

功能

自定义组件可以生成任何Vue组件。独立的数据验证可以很容易地转换成表单组件。表单可以通过JSON生成。表单可以通过Maker生成。强大的API可以快速操作表单。双向数据绑定事件可以扩展到本地更新数据验证网格布局内置组件。17种常见表单组件的比较1.x

更快、更小、更强大的全局配置自定义组件更容易扩展，并且支持第三方UI库，错误示例更少

通过JSON创建表单

通过应用编程接口操作表单

@ form-创建包描述

名称描述@ @form-create/iview iview版本表单生成器@ form-create/element-ui element-ui版本表单生成器@ form-create/core form-create core package @ form-create/utils form-create toolkit @ form-create/data省市多级联动数据使用

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

装置

装载npm i @表单-创建/元素-用户界面

全球注册

导入表单创建表单' @ form-create/element-ui '；vue . use(formCreate)；本地安装

导入表单创建表单' @ form-create/element-ui '；导出默认值{ components 3360 { formcreate 3360 formcreaet }。$ form ()}}生成一个表单

模板表单-创建v-model=' $ f' :规则=' rule ' @ on-submit=' on submit '/表单-创建/模板导出默认{ data(){ return {//表单实例对象$ f : }，//表单生成规则规则： [{type:' input '，field:' goods _ name '，title: '商品名称' }，{ type: ' date picker '，field3360' created _ at '，title3360}，方法： { onsubmit(formdata){//todo submit form } }；影响

实例对象$f

您可以通过$f快速操作表单，例如：

$f.hidden:隐藏指定的组件$f.validate:验证表单$f.setValue:修改表单组件$f.append:追加表单组件自定义组件

产生

由标签生成

{type:' El-button '，name:' BTN '，props: { type: ' primary '，field:' BTN '，loading 3360 true}，children3360 ['loading']}由模板生成

{type:' template '，name : ' BTN ' template : ' El-button 3360 loading=' loading ' { { text } } El-button '，VM : new vue({ data : { loading : true，text:' loading。

自定义组件转换成表单组件后，可以通过$ f.formdata、$ f.getvalue、$ f.setvalue、$ f.disabled等方式快速操作。以实现与内置组件相同的效果

预先确定

小道具

通过自定义组件中的道具接收属性

该值构成禁用组件的禁用状态，例如：

VM=vue({ prop : { value : string，disabled: boolean}})输入事件

通过输入事件更新组件内部的值

当组件值改变时，通过输入事件更新该值。例如，

虚拟机。$emit('input '，NewValue)；安装自定义组件

要生成的自定义组件必须通过Vue.component方法全局装入，或者通过formCreate.component方法装入

例如：

formcreate.component(' TestComponent '，组件)；或者.

Vue.component('TestComponent '，component)；产生

表单组件必须定义字段属性

数据

{type:“测试组件”，value:“测试”，field:“测试字段”，title:“自定义组件”}Maker

formcreate.maker.create的示例(' testcomponent '，' testfield '，' custom component ')。值(“测试”)

自定义计数器按钮组件以获取按钮点击次数。该组件的功能与内置组件的功能相同

formcreate。制造者。模板(' El-button @ click=' OnClick ' long : disabled=' disabled '计数器-{{num}}/el-button '，新Vue({ prop s 3360 {//预定义数据：布尔值，value:Number，}，data : function(){ return { num : this。value，}，watch : { value(n){ this。num=n；} }，方法： { OnClick : function(){ this。数量；//更新组件内部的值这个$emit('input '，这个。num)；}，}，})，' tmp '，'自定义标题')。值(100)。道具('禁用，假)完整示例

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。