form-create 详细介绍
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); } })