f-create
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.14 • Public • Published

    form-create

    MIT github version npm document JS gzip size Join the chat at https://gitter.im/xaboy/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

    Update log

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

    Docs

    简体中文 | English

    Files

    Name Description
    form-create.js iViewUI Version
    form-create.elm.js ElementUI Version

    Example

    Legend

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

    Install

    npm install form-create

    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/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/dist/form-create.elm.min.js"></script>

    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

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

    Reference

    Thank

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

    Donation

    donation.jpg

    Contact

    email : xaboy2005@qq.com

    License

    MIT

    Copyright (c) 2018-present xaboy

    Install

    npm i f-create

    DownloadsWeekly Downloads

    15

    Version

    0.0.14

    License

    MIT

    Unpacked Size

    2.26 MB

    Total Files

    27

    Last publish

    Collaborators

    • xinyakeji