Vue使用form-create-designer插件搭建表单构建器

form-create-designer 是一款基于 @form-create/element-ui 实现的自定义表单设计器组件，可以通过拖拽的方式快速创建表单，自定义表单的高效实现方法，效果如下：


form-create-designer核心功能：
    内置22个常用的表单组件和布局组件
    通过 JSON 生成表单
    双向数据绑定
    方便扩展
    事件扩展，事件注入
    数据验证
    栅格布局
    内置组件

使用方法：
1.下载插件

npm install @form-create/designer --save
npm install @form-create/element-ui --save

2.在main.js全局引入插件

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

3.使用方法

<template>
    <div>
        <fc-designer ref="designer"/>
    </div>
</template>
<script>
    export default {
        data() {
            return {

            }
        }
    }
</script>

更多参考：
插件地址：https://github.com/xaboy/form-create-designer
文档地址：http://designer.form-create.com/guide
演示Demo：http://form-create.com/designer
为form-create-designer加入生成JSON、导入JSON等功能


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！