form-create

Form builder with dynamic rendering, data collection, validation and submission capabilities, built-in 17 commonly used form components, and supports the use of json to generate any vue component, supporting two-way data binding, event expansion.

Support iview3.x 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

如果对您有帮助，您可以点右上角 "Star" 支持一下谢谢！本项目还在不断开发完善中,如有任何建议或问题请在这里提出本项目QQ讨论群28963712

Update log / 更新日志

Plan (2018-11-30)

内部结构重构 1.5.0版本
性能优化1.5.0版本
支持 ElementUI
英文文档 1.5.4版本

Docs

简体中文 | English

Example

Legend

Install

npm install form-create

Import

CDN:

<!-- 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 -->
<script src="//unpkg.com/form-create/dist/form-create.min.js"></script>

NodeJs:

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import formCreat from 'form-create'
import { maker } from 'form-create'

Vue.use(iView);
Vue.use(formCreat)

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

Reference

vue框架: Vue

iviewUI框架: iview

validate 表单验证规则，具体配置查看: async-validator

accept 文件类型: attr-accept

icon图标: 图标

form-builder: 使用PHP快速生成现代化表单

Thank

时光弧线 | wxxtqk | williamBoss | HeyMrLin | 讨论群里的大佬们

Contact

email : xaboy2005@qq.com

License

MIT

axhello/form-create