Skip to content
🔥🔥🔥 强大的表单生成器|Form builder with dynamic rendering, data collection, validation and submission capabilities, built-in 17 common form components, support for two-way data binding, event extension, and support for building built-in components and any vue components using json.
JavaScript HTML CSS
Branch: 2.0
Clone or download
Latest commit 75ff2e5 Jan 16, 2020

README.md

form-create V2

MIT github version npm document iview gzip size elment-ui gzip size Join the chat at https://gitter.im/xaboy/form-create

Form-create is a form generator that can generate dynamic rendering, data collection, validation, and submission via JSON. And support for generating any Vue components. Combined with the built-in 17 common form components and custom components, complex forms can be easily handled.

中文 README

Support

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

If you have a form component suitable for form-create, please feel free to click here to leave a message

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

Update log

http://file.lotkk.com/demo-live3.gif http://file.lotkk.com/demo-live2.gif

Docs

简体中文 English

Packages

Name Description
@form-create/iview iView Version
@form-create/iview4 iView V4 Version
@form-create/element-ui ElementUI Version

Example

Legend

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

Install

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

Import

CDN:

iviewUI

<!-- 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.elm.min.js"></script>

NodeJs:

iviewUI

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)

Usage

<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','goods_name'),
                    maker.date('create_at','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','goods_name'),
                formCreate.maker.date('create_at','created_at')
            ],
            option:{
                onSubmit:function (formData) {
                    alert(JSON.stringify(formData));
                }
            }
        },
        mounted:function () {
            this.model = this.fApi.model();
        }
    });

Demo

Download project

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

Install dependencies

$ npm i lerna -g
$ npm i
$ lerna bootstrap

Iview 2.x|3.x Demo

$ npm run dev:iview

Iview 4.x Demo

$ npm run dev:iview4

ElementUI Demo

$ npm run dev:ele

Comparison 1.x

  • faster

  • Smaller size

  • More powerful global configuration

  • Customization is easier to expand

  • Easier support for third-party UI libraries

  • Less bugs

Reference

Thank

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

Donation

donation.jpg

Contact

email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy

You can’t perform that action at this time.