JakHuang/form-generator

表单设计器 · 开发教程

JakHuang opened this issue · 6 comments

项目使用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代码预览器 · 开发教程》

6666666

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

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

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

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

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