表单自动生成器form-create介绍：可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器
表单自动生成器form-create介绍
可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器
介绍
轻松搞定 form 表单,让你不在为表单而烦恼
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
安装
ElementUI
npm i @form-create/element-ui
Iview 2.x|3.x
npm i @form-create/iview
Iview 4.x
npm i @form-create/iview4
导航
- ElementUI
- Iview
- 实例方法
- 自定义组件
- 第三方组件
功能
-
自定义组件
- 可生成任何Vue组件
- 自带数据验证
- 可快速扩展
- 轻松转换为表单组件
-
通过 JSON 生成表单
-
通过 Maker 生成表单
-
全局配置
- 可以设置表单配置
- 可以设置指定组件全局配置
- 可以设置所有组件公共的全局配置
-
强大的API，可快速操作表单
-
双向数据绑定
-
事件扩展
-
局部更新
-
数据验证
-
栅格布局
-
内置组件
- hidden
- input
- inputNumber
- checkbox
- radio
- switch
- select
- autoComplete
- cascader
- colorPicker
- datePicker
- timePicker
- rate
- slider
- upload
- tree
- frame
快速上手
本节将以iview版本为例介绍如何在项目中使用 form-create
ElementUI示例
引入 form-create V2
浏览器
NodeJs
在 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 原型方法, Window 全局方法
组件模式
使用
NodeJs
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 原型方法$formCreate(rule,option) 创建表单
new Vue({
el:'#app2',
data:{
fApi:{},
model:{}
},
mounted:function () {
//表单插入的节点
const root = document.getElementById('form-create');
//fApi为表单api
this.fApi = this.$formCreate(
//表单生成规则
[
this.$formCreate.maker.input('商品名称','goods_name',''),
this.$formCreate.maker.date('创建时间','created_at')
],
//组件参数配置
{
el:root,
//表单提交事件
onSubmit:function (formData,fApi) {
fApi.btn.loading();
}
});
}
})
全局方法
使用 window 全局方法formCreate.create(rule,option)创建表单
//表单插入的节点
const root = document.getElementById('form-create');
//$f为表单api
const $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为表单api
const $f = window.formCreate.create(
//表单生成规则
rule,
//组件参数配置
{
el:root,
//显示表单重置按钮
resetBtn:true,
//表单提交事件
onSubmit:function (formData) {
//按钮进入提交状态
$f.btn.loading();
}
});
在线示例
以下是 from-create 的功能演示和参考案例
案例
- CRMEB客户管理+电商管理系统 (演示站 账号：demo 密码：crmeb.com)
- 深入使用 maker 自定义组件案例
组件示例
- Input 输入框
- AutoComplete 自动生成
- Radio 单选框
- Cascader 多级联动
- Upload 上传
- Select 下拉选择框
- Checkbox 多选框
- InputNumber 数字输入框
- TimePicker 时间选择器
- DatePicker 日期选择器
- Switch 开关
- ColorPicker 颜色选择框
- Rate 评分
- Slider 滑块
- Tree 树形组件
- Frame 框架
功能示例
- 使用 json 参数生成表单
- 使用 maker 生成器生成表单
- Validator 表单验证
- Dynamic Add 动态添加组件
- Bind 双向数据绑定
- Generate 生成任意组件
- Event 事件扩展
- Col 栅格布局规则