具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片上传等功能组件。
1.4.5 版本已支持 iview3
- 内部结构重构
- 性能优化
- 支持 ElementUi
期待就点个赞吧 亲!
本项目还在不断开发完善中,如有任何
建议或问题请在这里提出
本项目QQ讨论群28963712
- 新增 使用标签模式生成
<form-create>
- 优化 maker规则生成器
- 新增 生成任意标签组件 `maker.create(componentName)
- 新增 标签模式下支持emit触发事件
- 新增 使用 template 快速生成自定义组件
maker.createTmp(template,vm)
- 支持
iview>=3.1.4
版本
建议保持在最新版本
- 修复 upload 组件 onRemove 不触发bug
- 修复 ie 下兼容性问题
- 修复 checkbox,radio 组件不能选中 bug
- 修复 滑块组件不传值时默认 NAN bug
- 优化 上传组件图标显示
- 修复 上传组件图片无法删除
- 新增
options.mounted
表单创建成功后的回调函数 - 支持
iview>=3.1.4
版本
- 优化 内部功能优化,参数优化
- 新增 使用 reload 更新生成规则
$f.reload(newRules)
- 新增 标签模式下生成规则发生变化时表单自动刷新
- 修复
npm run dev
命令无法有时打开 Demo
示例 在线预览
使用 maker 生成器生成: demo
使用 json 生成: demo
各组件生成: demo
npm install form-create
OR
git clone https://github.com/xaboy/form-create.git
cd form-create
npm install
浏览器:
<!-- import Vue 2.5.16-->
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<!-- import iview 2.14.3-->
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.13.0/styles/iview.css">
<script src="https://cdn.bootcss.com/iview/2.13.0/iview.min.js"></script>
<!-- 省市区三级联动json数据,不使用三级联动不需要引入 -->
<script src="district/province_city_area.js"></script>
<!-- 模拟数据,实际使用中不需要引入 -->
<script src="demo/mock.js"></script>
<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>
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)
npm run dev
OR
双击打开 demo/index.html
//示例规则
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
this.formData = $f.model();
}
})
<form-create ref="fc" :rule="rule" :option="option"></form-create>
new Vue({
el:'#app1',
data:{
formData:{},
rule:mock,
option:{
//显示表单重置按钮
resetBtn:true,
//表单提交事件
onSubmit:function (formData) {
alert(JSON.stringify(formData));
//按钮进入提交状态
$f.btn.loading();
//重置按钮禁用
$f.resetBtn.disabled();
//按钮进入可点击状态
// $f.btn.finish();
//创建第二个表单
$f = that.$formCreate(mock,root);
}
}
},
watch:{
'formData.address':{
handler:function (n) {
console.log(n);
},
deep:true
}
},
mounted:function () {
$f = this.$refs.fc.$f;
}
});
iview框架: iview
validate 表单验证规则,具体配置查看: async-validator
accept 文件类型: attr-accept
icon图标: 图标
form-builder: 使用PHP快速生成现代化表单
时光弧线 | wxxtqk | williamBoss | 讨论群里的大佬们