README_zh-CN.md

form-create V2

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

支持

• iViewUI 2.13.0+
• iViewUI 3.x
• ElementUI 2.8.2+

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题请在这里提出 本项目QQ讨论群28963712

更新日志

文档

简体中文 English

包说明

包名	说明
@form-create/iview	iview 版本
@form-create/element-ui	ElementUI 版本

示例

• CRMEB客户管理+电商管理系统 (演示站 账号：demo 密码：crmeb.com)

• 自定义组件 案例 (演示站)

• 使用生成器生成

• 使用 json 生成

• 各种示例

图例

安装

iview

npm install @form-create/iview

elementUI

npm install @form-create/element-ui

引入

CDN:

iview

<!-- 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/iview -->
<script src="//unpkg.com/@form-create/iview/dist/form-create.min.js"></script>

elementUI

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import element -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>

NodeJs:

iview

import formCreate from '@form-create/iview'
import { maker } from '@form-create/iview'
Vue.use(formCreate)

ElementUI

import formCreate from '@form-create/element-ui'
import { maker } from '@form-create/element-ui'
Vue.use(formCreate)

使用

<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();
        }
    });

对比 1.x

• 速度更快

• 体积更小

• 更强大的全局配置

• 自定义更容易扩展

• 更容易支持第三方 UI 库

• 更少的 bug

参考

• Vue

• iViewUI

• ElementUI

• async-validator

• PHP版的表单生成器:form-builder

感谢

时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop

捐赠

联系

email : [email protected]

License

MIT

Copyright (c) 2018-present xaboy