form-create：具有数据收集、校验和提交功能的表单生成器

具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能。

JavaScript Vue.js相关

访问GitHub主页

共2157Star

详细介绍

form-create V2

MIT github version npm document

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
  • iViewUI 4.x
  • ElementUI 2.8.2+
  • Ant-design-vue 1.5.3+

If you have a form component suitable for form-create, please feel free to click here to leave a message

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

  • Preview

demo1

More
  • Form operations

demo2

  • group component

demo3

  • control configuration

demo2

Docs

简体中文 English

Packages

Name Description
@form-create/iview iView Version
@form-create/iview4 iView V4 Version
@form-create/element-ui ElementUI Version
@form-create/ant-design-vue Ant-design-vue Version

Example

Legend

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

Install

iview 2.x|3.x

npm install @form-create/iview

iview 4.x

npm install @form-create/iview4

elementUI

npm install @form-create/element-ui

ant-design-vue

npm install @form-create/ant-design-vue

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.min.js"></script>

ant-design-vue

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link href="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.min.css" rel="stylesheet">
<!-- import moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/zh-cn.js"></script>
<!-- import ant-design-vue -->
<script defer src="https://unpkg.com/ant-design-vue@1.5.3/dist/antd.js"></script>
<!-- import form-create -->
<script src="//unpkg.com/@form-create/ant-design-vue/dist/form-create.min.js"></script>

NodeJs:

iviewUI

import formCreate from '@form-create/iview'
Vue.use(formCreate)

ElementUI

import formCreate from '@form-create/element-ui'
Vue.use(formCreate)

ant-design-vue

import formCreate from '@form-create/ant-design-vue'
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();
        }
    });

Demo

Download project

$ git clone https://github.com/xaboy/form-create.git
$ cd form-create

Install dependencies

$ npm run bootstrap

Iview 2.x|3.x Demo

$ npm run dev:iview

Iview 4.x Demo

$ npm run dev:iview4

ElementUI Demo

$ npm run dev:ele

ant-design-vue Demo

$ npm run dev:antd

Thank

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

Donation

donation.jpg

Contact

email : xaboy2005@qq.com

License

MIT

Copyright (c) 2018-present xaboy

推荐源码