表单自动生成器form-介绍 可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器介绍
轻松搞定 form 表单,让你不在为表单而烦恼
form- 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器 。并且支持生成任何 Vue 组件 。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定 。
安装
npm i @form-/-ui
Iview 2.x|3.x
npm i @form-/iview
Iview 4.x
npm i @form-/
导航功能
通过 JSON 生成表单
通过 Maker 生成表单
全局配置
强大的API，可快速操作表单
双向数据绑定
事件扩展
局部更新
数据验证
栅格布局
内置组件
快速上手
本节将以iview版本为例介绍如何在项目中使用 form-
示例
引入 form- V2
浏览器

在 main.js 中写入以下内容：
import Vue from 'vue';import iView from 'iview';import 'iview/dist/styles/iview.css';import formCreate from '@form-create/iview'//获取生成器import { maker } from '@form-create/iview'Vue.use(iView);Vue.use(formCreate)
生成表单
可使用3种方式创建表单:
组件模式, Vue 原型方法,全局方法
组件模式
使用标签创建表单

export default {data () {return {//实例对象fApi:{},//表单生成规则rule:[{type:'input',field:'goods_name',title:'商品名称'},{type:'datePicker',field:'created_at',title:'创建时间'}],//组件参数配置option:{//表单提交事件onSubmit:function (formData) {alert(JSON.stringify(formData));}}};}};
浏览器
new Vue({el:'#app1',data:{fApi:{},rule:[{type:'input',field:'goods_name',title:'商品名称'},{type:'datePicker',field:'created_at',title:'创建时间'}],option:{onSubmit:function (formData) {alert(JSON.stringify(formData));}}}});
Vue 原型方法
使用 vue 原型方法$(rule,)创建表单

new Vue({el:'#app2',data:{fApi:{},model:{}},mounted:function () {//表单插入的节点const root = document.getElementById('form-create');//fApi为表单apithis.fApi = this.$formCreate(//表单生成规则[this.$formCreate.maker.input('商品名称','goods_name',''),this.$formCreate.maker.date('创建时间','created_at')],//组件参数配置{el:root,//表单提交事件onSubmit:function (formData,fApi) {fApi.btn.loading();}});}})
全局方法
使用全局方法.(rule,)创建表单

//表单插入的节点const root = document.getElementById('form-create');//$f为表单apiconst $f = window.formCreate.create(//表单生成规则[{type:'input',field:'goods_name',title:'商品名称'},{type:'datePicker',field:'created_at',title:'创建时间'}],//组件参数配置{el:root,//显示表单重置按钮resetBtn:true,//表单提交事件onSubmit:function (formData) {//按钮进入提交状态$f.btn.loading();}});
JSON
使用 JSON 生成表单

//JSON 规则const rule = [{"type":"input","field":"goods_name","title":"商品名称","value":"mi"},{"type":"inputNumber","field":"goods_price","title":"商品价格","value":12}]
//表单插入的节点const root = document.getElementById('form-create');//$f为表单apiconst $f = window.formCreate.create(//表单生成规则rule,//组件参数配置{el:root,//显示表单重置按钮resetBtn:true,//表单提交事件onSubmit:function (formData) {//按钮进入提交状态$f.btn.loading();}});