Form-Generator拖拽表单的使用+二次修改

Form-Generator拖拽表单

本文讲述了form-generator项目基于Vue框架以及ElementUI组件实现拖拽表单完成项目及二次开发
gitee地址 ： https://gitee.com/mrhj/form-generator?_from=gitee_search

简介

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

使用

• 在左侧点击组件或拖拽组件到画板 ， 生成对应组件
• 根据业务所需在右侧属性面板设置组件及表单属性
• 点击查看json可以查看当前画布组件及表单的json生成 ， 用于存储于后端
• 点击运行可以以画布组件及右侧属性配置生成对应页面内容及vue模板代码 ， 可修改代码点击运行生成最新页面 （json不会更改），也可直接生成vue文件放入项目中运行

项目原理

• 采用vuedraggable第三方资源包在Vue项目中实现组件的拖拽
• 在src/components/generator/config.js中配置表单以及组件的json配置(下方有代码)
• 拖拽至画板中将每一个组件的json配置统一push进统一渲染数组 ， 通过vue的render函数进行画板中的组件渲染

  前提 ： 项目中以全局注册element UI组件 ， 这样才可以直接生成el-input等标签组件

• 点击运行时生成页面 ， 项目使用iframe嵌入同项目中的priview页面（在vue.config.js中配置有两个页面入口）
  • priview页面在src/views/priview/main.js重新new Vue ， 通过src/components/generator/js.js 以及html.js生成对应的template模板以及script脚本（html以及js的生成请查看详细代码）
  • 通过new Vue时的components以及template属性将生成的字符串模板生成对应vue文件页面

下方为组件以及表单的json配置

config.js的配置

// 表单属性【右面板】
export const formConf = {
   
  formRef: 'elForm',
  formModel: 'formData',
  size: 'medium'