README_zh-CN.md

form-create V2

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

支持

• iViewUI 2.13.0+
• iViewUI 3.x
• iViewUI 4.x
• ElementUI 2.8.2+
• Ant-design-vue 1.5.3+

如果您有适合 form-create 的表单组件, 欢迎点击这里留言

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

更新日志

• 预览

更多

• 操作表单

• group 组件

• control 配置项

文档

简体中文 English

包说明

包名	说明
@form-create/iview	iview 版本
@form-create/iview4	iView V4 版本
@form-create/element-ui	ElementUI 版本
@form-create/ant-design-vue	Ant-design-vue 版本

示例

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

• 实战案例 (演示站)

• 使用生成器生成

• 使用 json 生成

• 各种示例

图例

安装

iview 2.x|3.x

npm install @form-create/iview

iview 4.x

npm install @form-create/iview4

elementUI

npm install @form-create/element-ui

ant-design-vue

npm install @form-create/ant-design-vue

引入

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>

ant-design-vue

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/[email protected]/dist/antd.min.css" rel="stylesheet">
<!-- import moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script>
<!-- import ant-design-vue -->
<script defer src="https://unpkg.com/[email protected]/dist/antd.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>

NodeJs:

iview

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

ElementUI

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

ant-design-vue

import formCreate from '@form-create/ant-design-vue'
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();
        }
    });

示例

下载项目

$ git clone https://github.com/xaboy/form-create.git
$ cd form-create

安装依赖

$ npm run bootstrap

查看 Iview 2.x|3.x示例

$ npm run dev:iview

查看 Iview 4.x示例

$ npm run dev:iview4

查看 ElementUI 示例

$ npm run dev:ele

查看 ant-design-vue 示例

$ npm run dev:antd

感谢

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

捐赠

联系

email : [email protected]

License

MIT

Copyright (c) 2018-present xaboy