form-create

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.

中文 README

Support

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

> 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

> Form-create V2 is coming soon!!! Faster, smaller, and simpler to expand. If you expect it, please star support.

> Update log

Docs

简体中文 | English

Files

Example

• In-depth use case of maker customize component (Demo station)

• Generate a form using the maker generator

• Generate a form using the json parameter

• Component example

Legend

Install

npm install form-create

Import

CDN:

iviewUI

elementUI

NodeJs:

iviewUI

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

ElementUI

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

Usage

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

Reference

• Vue

• iViewUI

• ElementUI

• async-validator

• PHP form-builder

Thank

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

Donation

Contact

email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy