首页 > 建站教程 > 前端框架 >  Vue使用form-create-designer插件搭建表单构建器正文

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

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

vue自定义表单

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等功能