动态天生form表单,不再为表单懊恼

具有数据网络、校验和提交功用的表单天生器，支撑双向数据绑定和事宜扩大，组件包括有复选框、单选框、输入框、下拉挑选框等表单元素以及省市区三级联动,时候挑选,日期挑选,色彩挑选,滑块,评分,框架,树型,文件/图片上传等功用组件。

1.4.5版本已支撑 iview3

Github | Gitee | Npm | form-create 文档

图例 demo

装置

npm install form-create

OR

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install

运转

npm run dev

OR

双击翻开 demo/index.html

引入

浏览器:

NodeJs:

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import formCreat from 'form-create'
//三级联动数据,不必能够不引入
import 'form-create/district/province_city_area.js'
//示例划定规矩,实际运用中不需要引入
import 'form-create/mock.js'
Vue.use(iView);
Vue.use(formCreat)

Demo

运用 maker 天生器天生: demo

运用 json 天生: demo

各组件天生: demo

三种形式建立表单

申明:

mock() 为表单天生划定规矩
root 为表单插进去节点
$f 为表单实例

标签形式

标签形式下 rule 划定规矩发生变化会及时动态衬着表单

let rules = mock();
new Vue({
el:'#app1',
data:{
//表单天生划定规矩
rule:rules,
//组件参数设置
option:{
//显现表单重置按钮
resetBtn:true,
//表单提交事宜
onSubmit:function (formData) {
//formData为表单数据
//按钮进入提交状况
this.$f.btn.loading();
//重置按钮禁用
this.$f.resetBtn.disabled();
//重置按钮恢复一般
//this.$f.resetBtn.disabled();
//按钮进入可点击状况
//this.$f.btn.loading(false);
}
},
//初始化变量
$f: {},
model: {}
},
mounted:function () {
//猎取表单api
this.$f = this.$refs.fc.$f;
//猎取双向数据绑定的数据划定规矩
this.model = this.$f.model();
}
});

组织要领

let rules = mock();
new Vue({
el:'#app2',
data:{
//初始化变量
$f:{},
model:{}
},
mounted:function () {
//表单插进去的节点
const root = document.getElementById('form-create');
//$f为表单api
this.$f = this.$formCreate(
//表单天生划定规矩
rules,
//组件参数设置
{
el:root,
//显现表单重置按钮
resetBtn:true,
//表单提交事宜
onSubmit:function (formData) {
//formData为表单数据
//按钮进入提交状况
this.$f.btn.loading();
//重置按钮禁用
this.$f.resetBtn.disabled();
//重置按钮恢复一般
//this.$f.resetBtn.disabled();
//按钮进入可点击状况
//this.$f.btn.loading(false);
}
});
//猎取双向数据绑定的数据划定规矩
this.model = this.$f.model();
}
})

全局要领

//表单插进去的节点
var root = document.getElementById('form-create'),rules = mock();
//初始化变量
var $f = {},model = {};
//$f为表单api
$f = window.formCreate(
//表单天生划定规矩
rules,
//组件参数设置
{
el:root,
//显现表单重置按钮
resetBtn:true,
//表单提交事宜
onSubmit:function (formData) {
//formData为表单数据
//按钮进入提交状况
$f.btn.loading();
//重置按钮禁用
$f.resetBtn.disabled();
//重置按钮恢复一般
//$f.resetBtn.disabled();
//按钮进入可点击状况
//$f.btn.loading(false);
}
});
//猎取双向数据绑定的数据划定规矩
model = $f.model();

PHP 表单天生器