Vue使用form-create-designer插件搭建表单构建器_bootstrap教程，layUI教程，前端框架教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

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

使用方法：
1.下载插件

`1`	`npm install @form-create/designer --save`

`2`	`npm install @form-create/element-ui --save`

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

1import Vue from 'vue'
2import formCreate from '@form-create/element-ui'
3import FcDesigner from '@form-create/designer'
4Vue.use(formCreate)
5Vue.use(FcDesigner)

3.使用方法

01<template>
02    <div>
03        <fc-designer ref="designer"/>
04    </div>
05</template>
06<script>
07    export default {
08        data() {
09            return {
10 
11            }
12        }
13    }
14</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等功能

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

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

猜你喜欢