Form builder with dynamic rendering, data collection, validation and submission capabilities, built-in 17 commonly used form components, and supports the use of json to generate any vue component, supporting two-way data binding, event expansion.
Support iview3.x If it helps, you can click on "Star" in the upper right corner. Thank you! The project is still being developed and improved. If there are any 'recommendations or questions, please ask here
如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题请在这里提出 本项目QQ讨论群28963712
-
内部结构重构
1.5.0版本 -
性能优化
1.5.0版本 -
支持 ElementUI
-
英文文档
1.5.4版本
-
CRMEB客户管理+电商管理系统 (演示站 账号：demo 密码：crmeb.com)
-
In-depth use case of maker customize component / 自定义组件 案例 (演示站)
npm install form-createCDN:
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/form-create/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 { maker } from 'form-create'
Vue.use(iView);
Vue.use(formCreat)<form-create ref="fc" v-model="fApi" :rule="rule" :option="option"></form-create>NodeJs
import {maker} from 'form-create'
export default {
data () {
return {
fApi:{},
model: {},
//表单生成规则
rule:[
maker.input('商品名称','goods_name'),
maker.date('创建时间','created_at')
],
//组件参数配置
option:{
//表单提交事件
onSubmit:function (formData) {
alert(JSON.stringify(formData));
}
}
};
},
mounted:function(){
this.model = this.fApi.model();
}
};Browser
new Vue({
el:'#app1',
data:{
fApi:{},
model: {},
rule:[
formCreate.maker.input('商品名称','goods_name'),
formCreate.maker.date('创建时间','created_at')
],
option:{
onSubmit:function (formData) {
alert(JSON.stringify(formData));
}
}
},
mounted:function () {
this.model = this.fApi.model();
}
});vue框架: Vue
iviewUI框架: iview
validate 表单验证规则，具体配置查看: async-validator
accept 文件类型: attr-accept
icon图标: 图标
form-builder: 使用PHP快速生成现代化表单
时光弧线 | wxxtqk | williamBoss | HeyMrLin | 讨论群里的大佬们
email : [email protected]
Copyright (c) 2018-present xaboy
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent