form-create V2

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
ElementUI 2.8.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

Update log

Docs

简体中文 English

Packages

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

Example

Legend

Install

iview

npm install @form-create/iview

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

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

Contact

email : xaboy2005@qq.com

License

MIT

zxc122333 / form-create