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

一、插件简介

form-create-designer 是基于 @form-create/element-ui 实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。

1.快速导航

• 插件地址：https://github.com/xaboy/form-create-designer
• 文档地址：http://designer.form-create.com/guide
• 演示Demo：http://form-create.com/designer

2.核心功能

• 内置22个常用的表单组件和布局组件
• 通过 JSON 生成表单
• 双向数据绑定
• 方便扩展
• 事件扩展，事件注入
• 数据验证
• 栅格布局
• 内置组件

二、基础使用

1.下载插件

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

2.引入插件

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>

4.效果演示

三、功能扩展

利用 codemirror 插件和 @form-create/designer 的API实现表单配置的导入导出功能

1.下载插件

# codemirror
npm install vue-codemirror --save
# JSON校验器插件
npm install jsonlint-mod --save

2.引入插件

// 引入表单构建插件
import Vue from 'vue'
import formCreate from '@form-create/element-ui'
import FcDesigner from '@form-create/designer'
Vue.use(formCreate)
Vue.use(FcDesigner)

// 引入代码编辑器
import jsonlint from 'jsonlint-mod';
import {codemirror} from 'vue-codemirror'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/mode/javascript/javascript.js'

3.配置使用

• HTML代码

  <template>
    <div class="main">
      <div class="middle">
        <div class="tool">
          <!--功能按钮-->
          <el-row>
            <el-button icon="el-icon-download" type="primary" size="small" 
                       @click="handleDownloadRule()" round>生成表单JSON</el-button>
            <el-button icon="el-icon-upload2" type="success" size="small" 
                       @click="handleUploadRule()" round>导入表单JSON</el-button>
            <el-button icon="el-icon-download" type="primary" size="small" 
                       @click="handleDownloadOption()" round>生成表单配置</el-button>
            <el-button icon="el-icon-upload2" type="success" size="small" 
                       @click="handleUploadOption()" round>导入表单配置</el-button>
          </el-row>
        </div>
        <!--表单构建器-->
        <fc-designer class="form-build" ref="designer"/>
      </div>
  	
      <!--对话框-->
      <el-dialog :title="dialogTitle" 
                 :visible.sync="dialogState" 
                 :close-on-click-modal="false" 
                 append-to-body>
        <codemirror v-model="codemirrorContent" 
                    :options="codemirrorOptions" 
                    style="height: 90%;text-align: left;border: 1px solid #ccc;">
        </codemirror>
        <el-row v-if="dialogMenu">
          <el-button @click="dialogState = false">取 消</el-button>
          <el-button type="primary" @click="handleImport()">导 入</el-button>
        </el-row>
      </el-dialog>
    </div>
  </template>
  

• JavaScript代码

  export default {
      beforeCreate() {
  		// 开启JSON校验
          window.jsonlint = jsonlint
      },
      data() {
          return {
              dialogTitle: '', // 对话框标题
              dialogState: false, // 对话框状态
              dialogMenu: false, // 对话框菜单状态
  			
              // codemirror配置
              codemirrorOptions: {
                  mode: "application/json",
                  theme: "default",
                  gutters: ['CodeMirror-lint-markers'],
                  tabSize: 2,
                  lint: true,
                  line: true,
                  lineNumbers: true,
                  matchBrackets: true,
                  lineWrapping: true,
                  styleActiveLine: true,
                  readOnly: false
              },
              // codemirror内容
              codemirrorContent: null
          }
      },
      components: {
          codemirror
      },
      methods: {
          // 导出表单JSON
          handleDownloadRule(){
              this.dialogTitle = "表单规则"
              this.dialogState = true
              this.dialogMenu = false
  
              this.codemirrorOptions.readOnly = true
              this.codemirrorContent = JSON.stringify(this.$refs.designer.getRule(), 
                                                      null, 2)
          },
          // 导出表单配置
          handleDownloadOption(){
              this.dialogTitle = "表单配置"
              this.dialogState = true
              this.dialogMenu = false
  
              this.codemirrorOptions.readOnly = true
              this.codemirrorContent = JSON.stringify(this.$refs.designer.getOption(), 
                                                      null, 2)
          },
          // 导入表单JSON
          handleUploadRule(){
              this.dialogTitle = "导入表单规则"
              this.dialogState = true
              this.dialogMenu = true
  
              this.codemirrorOptions.readOnly = false
              this.codemirrorContent = JSON.stringify([], null, 2)
          },
          // 导入表单配置
          handleUploadOption(){
              this.dialogTitle = "导入表单配置"
              this.dialogState = true
              this.dialogMenu = true
  
              this.codemirrorOptions.readOnly = false
              this.codemirrorContent = JSON.stringify({}, null, 2)
          },
          // 配置导入
          handleImport(){
              try {
                  let content = JSON.parse(this.codemirrorContent)
                  if(this.dialogTitle == "导入表单规则"){
                      this.$refs.designer.setRule(content)
                  }
                  if(this.dialogTitle == "导入表单配置"){
                      this.$refs.designer.setOptions(content)
                  }
                  this.dialogState = false
              } catch(e) {
                  alert('输入内容格式有误!')
              }
          }
      }
  }
  

4.效果演示