表单设计器 · 开发教程

[JakHuang]

项目使用vue-cli4生成。用到了jsx，所以要对vue render比较熟悉！！！ 如果对render和jsx还不熟悉，一定要反复阅读并理解：渲染函数 & JSX。二开对于初学者，有一定的难度。

项目由四部分组成：表单设计器，.vue代码生成器，.vue代码预览器，表单json解析器。
接下来通过添加一个《按钮 el-button》来带大家感受下这四部分。

前置准备：将项目下载到本地，然后安装依赖。如有需要可参阅运行

一、在添加一个新组件前，首先要思考的是，项目中有没有引入该组件？
对于el-button，它是随element UI全局注册的组件，所以不需要再引入。如果是一个没有引入的组件，需要引入，引入方法参阅vue官方文档组件注册

二、将组件添加到表单设计器
确保el-button组件可用后，将其添加到表单设计器。
2.1 在文件src\components\generator\config.js中添加一个布局型组件

...
export const layoutComponents = [
  ...,
  {
    __config__: {
      label: '按钮',
      showLabel: true,
      changeTag: true,
      labelWidth: null,
      tag: 'el-button',
      tagIcon: 'button',
      defaultValue: undefined,
      span: 24,
      layout: 'colFormItem',
      document: 'https://element.eleme.cn/#/zh-CN/component/button'
    },
    __slot__: {
      default: '主要按钮'
    },
    type: 'primary',
    icon: 'el-icon-search',
    round: false,
    size: 'medium',
    plain: false,
    circle: false,
    disabled: false
  }
]

其中__config__和__slot__是本项目自定义的属性，自定义属性的格式均为__XXX__；
其余属性与el-button组件属性对应；
config.tagIcon中使用的是svg图标。图标来自iconfont，下载后放在src\icons\svg文件夹中。
此时，左侧备选组件会出现【按钮】组件，但是，按钮不能显示文字。

2.2 新建与__config__.tag的值同名的__slot__解析文件el-button.js
src\components\render\slots\el-button.js，代码如下：

export default {
  default(h, conf, key) {
    return conf.__slot__[key]
  }
}

default函数解析将json配置中的default属性：

__slot__: {
    default: '主要按钮'
 }

解析为按钮上的文字。
此时，中间设计器中，按钮上的文字已经可以显示出来了。但是，右侧面板中，可配置属性还比较少，需要添加属性配置。

__slot__解析文件是支持jsx语法的，本例中表现的不够具体，更多的使用方式可以翻阅源码中slots文件夹；其中el-input.js代表性强，建议理解。

__slot__的解析流程设计得比较绕，主要的出发点是为了：保证表单的配置是纯json格式的，方便数据库存储和用户配置。这里的【用户】指的是：没有编程基础的普通用户。

2.3 接下来我们让设计器支持type，icon等组件属性的可视化修改。
在src\views\index\RightPanel.vue中添加相应的编辑表单项。
2.3.1 type属性配置项：

<el-form-item
   v-if="activeData.type !== undefined && activeData.__config__.tag === 'el-button'"
  label="按钮类型"
>
  <el-select v-model="activeData.type" :style="{ width: '100%' }">
    <el-option label="primary" value="primary" />
    <el-option label="success" value="success" />
    <el-option label="warning" value="warning" />
    <el-option label="danger" value="danger" />
    <el-option label="info" value="info" />
    <el-option label="text" value="text" />
  </el-select>
</el-form-item>

2.3.2 size属性配置项：经过检查el-color-picker已经有size属性的配置项了，所以重用原有的就行了。
增加

activeData.__config__.tag === 'el-button'

增加后的配置项如下：

<el-form-item
  v-if="activeData.size !== undefined &&
    (activeData.__config__.optionType === 'button' ||
      activeData.__config__.border ||
      activeData.__config__.tag === 'el-color-picker' ||
      activeData.__config__.tag === 'el-button')"
  label="选项尺寸"
>
  <el-radio-group v-model="activeData.size">
    <el-radio-button label="medium">
      中等
    </el-radio-button>
    <el-radio-button label="small">
      较小
    </el-radio-button>
    <el-radio-button label="mini">
      迷你
    </el-radio-button>
  </el-radio-group>
</el-form-item>

2.3.3 icon属性配置项：复制el-input的前图标配置项，修改为：

<el-form-item
  v-if="activeData['icon']!==undefined && activeData.__config__.tag === 'el-button'"
  label="按钮图标"
>
  <el-input v-model="activeData['icon']" placeholder="请输入按钮图标名称">
    <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('icon')">
      选择
    </el-button>
  </el-input>
</el-form-item>

此处使用了openIconsDialog调用封装好的图标选择器，方便快速选取图标。

组件属性的可视化配置是一项需要耐心的操作，以上列举了3个属性的配置，更多的属性也都是配置在RightPanel.vue中。当然，现有的配置方式存在一定的问题，这是需要在以后项目中逐步优化的。

总结

表单设计器的开发流程基本就是上边这三步。config.js配置备选图标；在有使用__slot__时需要编写解析文件；在RightPanel.vue可视化配置组件属性。
接下来，当点击运行按钮的时候，发现新加的组件并不能显示。这是因为没有编写相应的.vue代码生成器生成规则。

本文相关代码，参阅表单设计器 · 开发教程代码

系列教程：
《表单设计器 · 开发教程》
《表单解析器 · 开发教程》
《vue代码生成器 · 开发教程》
《vue代码预览器 · 开发教程》

[NSObjects]

6666666

[changkaix]

请问各位大佬，elementUI的组件如何添加事件？目前看到的都是添加一些属性

[yanheZ]

请问各位大佬，这个如何添加一个字典组件

[zning02]

大佬，属性面板，有一些组件，属性会需要联动，有好办法不？

[YuSeN-FronTend]

icon渲染时记得下载 svg-sprite-loader

[a249474283]

请问各位大佬 想引入一个容器类的组件应该如何引入并允许容器进行嵌套 比如el-card组件