form-create- JS 表单生成器
JavaScript 常用JavaScript包
共0Star
详细介绍
form-create
具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。
如果对您有帮助,您可以点右上角 “Star” 支持一下 谢谢!
1.3 版本重大更新
-
优化和精简内部结构
-
支持 双向数据绑定!!!
-
支持 全局方法快速创建表单
-
新增
option.mounted
事件,当组件加载完成后触发 -
修复 一些BUG
示例 代码
安装
npm install form-create
OR
git clone https://gitee.com/xaboy/form-create.git
cd form-create
npm install
引入
浏览器:
NodeJs:
//三级联动数据,不使用三级联动不需要引入
import 'form-create/district/province_city_area.js'
//示例规则,实际使用中不需要引入
import 'form-create/mock.js'
import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import formCreat from 'form-create'
Vue.use(iView);
Vue.use(formCreat)
注意! iview版本为2.14.3
,Vue版本为2.5.*
使用
//示例规则
let rules = window.mock;
new Vue({
data:{
formData:{}
},
mounted:function(){
let root = document.getElementById('app'),that = this;
$f = this.$formCreate(mock,{
el:root,
onSubmit:function (formData) {
console.log(formData);
//提交状态
$f.btn.loading();
//点击状态
//$f.btn.finish();
//创建第二个表单
$f2 = that.$formCreate(mock,root);
}
});
//动态添加表单元素
$f.append($r,'goods_name');
//绑定表单数据到formData
$f.model(this.formData);
}
})