前端低代码form-generator的实现及新增自定义组件

form-generator的实现及新增自定义组件

form-generator是什么？✨

form-generator的作者是这样介绍的：Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

实际用大白话讲就是一个基于Element UI组件库的一个低代码平台，通过拖拽的方式，将单个的组件组合成你想要的样子，最终一键生成代码，可以直接放到你的Vue项目中，提高开发效率。

form-generator的实现✨

布局

左侧：供拖拽的组件
中间：组件单个及组合预览效果
右侧：组件及表达的配置项

实现

1. 把组件在config.js配置成json
2. 通过拖拽把当前组件的json转化成vue render可以识别的数据格式

那请问什么样的数据格式是vue render可以识别的？
这个时候你就要了解下vue的render方法了~

render函数讲解

在使用render函数中，会使用到一个参数createElement，而这个createElement参数，本质上，也是一个函数，是vue中构建虚拟dom所使用的工具。下面就围绕着这个createElement来看一下。
在createelement方法，有三个参数：

1. 第一个参数（必要参数）：主要是用于提供dom中的html内容，类型可以是字符串、对象或函数。
2. 第二个参数（对象类型，可选）：用于设置这个dom中的一些样式、属性、传的组件的参数、绑定事件之类的。
3. 第三个参数（类型是数组，数组元素类型是VNode,可选）：主要用于设置分发的内容，如新增的其他组件。

注意：组件树中的所有vnode必须是唯一的 通过传入createElement参数，创建虚拟节点，然后再将节点返回给render返回出去。
总的来说，render函数的本质就是创建一个虚拟节点。

render方法了解的差不多了，那我们看下form-generator里面把json转化后的vnode

到此form-generator大概的实现思路我们知道了，下面我们看下如何自定义组件，在form-generator的基础上添砖加瓦，实现我们项目的业务需求~

如何自定义组件✨

1. src\components\generator\config.js 中添加一个json
2. src\compontnes\目录下创建对应的组件
3. main.js中全局注册刚创建的组件
4. src\views\index\RightPanel.vue 中绑定第一步中json中添加的各个属性值

代码

//第一步：在/form-generator/src/components/generator/config.js里面加入组件json
{
   
   
    __config__: {
   
   
      label: '自定义按钮',
      showLabel: false,
      changeTag: true,
      labelWidth