JS 表单生成器 form-create
- 授权协议: MIT
- 开发语言: JavaScript
- 操作系统: 跨平台
- 软件首页: https://gitee.com/xaboy/form-create
- 软件文档: https://xaboy.gitbooks.io/form-create/content/kuai-su-shang-shou.html
软件介绍
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);
}
})
