README_zh-CN.md

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。

支持 vue3 版本

开源的vue可视化表单设计器组件 (功能演示) | Vue3版本

支持

• iview
• view-design
• element-ui
• ant-design-vue

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

本项目QQ讨论群629709230

更新日志

• 预览

更多

• 操作表单

详细说明

• group 组件

详细说明

• control 配置项

详细说明

文档

简体中文 | Vue3版本 | English

包说明

包名	说明
@form-create/iview	iview 版本
@form-create/iview4	view-design 版本
@form-create/element-ui	element-ui 版本
@form-create/ant-design-vue	ant-design-vue 版本
@form-create/designer	表单设计器

示例

• 使用生成器生成

• 使用 json 生成

• 各种示例

图例

安装

根据自己使用的 UI 安装对应的版本

iview

npm install @form-create/iview

view-design

npm install @form-create/iview4

element-ui

npm install @form-create/element-ui

ant-design-vue

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

引入

CDN:

iview

<!-- 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>

element-ui

<!-- 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:

iview

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

element-ui

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

ant-design-vue

import formCreate from '@form-create/ant-design-vue'
Vue.use(formCreate)

使用

<form-create :rule="rule" v-model="fApi" :option="options" :value.sync="value"/>

export default {
    data(){
        return {
            fApi:{},
            value:{field1:'111',field2:'222',time:'11:11:11'},
            options:{
                onSubmit:(formData)=>{
                    alert(JSON.stringify(formData))
                }
            },
            rule:[
                {type:'input', field:'field1',title:'field1',value:'aaa'},
                {type:'input', field:'field2',title:'field2',value:'sss'},
                {type:'timePicker', field:'time',title:'time',value:'12:12:12'},
                {
                    type:'ElButton',
                    title:'修改 field1',
                    native: false,
                    on:{
                        click: ()=>{
                            this.rule[0].value+='a'
                        }
                    },
                    children: ['点击'],
                }
            ]
        }
    }
}

源码运行

下载项目

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

安装依赖

$ npm install -g rimraf
$ npm run bootstrap

查看 iview 示例

$ npm run dev:iview

查看 view-design 示例

$ npm run dev:iview4

查看 element-ui 示例

$ npm run dev:ele

查看 ant-design-vue 示例

$ npm run dev:antd

感谢

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

联系

License

MIT

Copyright (c) 2018-present xaboy