🔥🔥🔥 使用JSON快速生成表单|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.
Branch: master
Clone or download
Latest commit 294f2ec Feb 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github 修复显示问题 Apr 21, 2018
demo 'elm修改为element' Feb 9, 2019
dist 1.6.0-bata.2 Feb 12, 2019
district 1.3.0版本 Jun 24, 2018
images 1.6.0-bata.2 Feb 12, 2019
src 1.6.0-bata.2 Feb 12, 2019
.babelrc 优化打包 Jan 21, 2019
.gitignore bug修复 Aug 21, 2018
LICENSE MIT License Apr 21, 2018
README.md 1.6.0-bata.2 Feb 12, 2019
README_zh-CN.md 1.6.0-bata.2 Feb 12, 2019
bili.config.elm.js 'elm修改为element' Feb 9, 2019
bili.config.js 支持elementUI bata1 Feb 2, 2019
element.js '1.6.0-bata2' Feb 10, 2019
index.js 1.6.0-bata.2 Feb 12, 2019
package.json 1.6.0-bata.2 Feb 12, 2019
webpack.config.elm.js 'elm修改为element' Feb 9, 2019
webpack.config.js 兼容elementUI Jan 31, 2019

README.md

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

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

Support

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

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

Donation

donation.jpg

Contact

email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy