Form Generator添加自定义组件，文本组件

Form Generator新增自定义组件，文字组件显示标题

运行预览效果：

需求：加一个新组件，名称为“展示型组件”，下面内容有标题，支持右侧编辑。
以上视频为完成展示。
以下为实现过程

1.先在src\components\ 下创建view

<template>
  <div ref="rowTitle" v-text="rowTitleText" :style="setStyle()"></div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  computed: {
    rowTitleText () {
      return this.$attrs.titleText
    },
  },
  watch:{
    $attrs: {
      deep: true,
      handler (val) {
        this.setStyle()
      }
    },
  },
  methods: {
    setStyle(){
      let obj = {
        color: this.$attrs.fontColor,
        fontSize: this.$attrs.fontSize+'px',
        fontWeight: this.$attrs.fontWeight ? 600 : 400,
        textAlign: this.$attrs.textAlign,
      }
      return obj
    }
  },
};
</script>

<style lang="scss" scoped>
</style>

2.在main.js中引用。

// 标题组件
import RowTitle from '@/components/RowTitle'
// 全局组件挂载
Vue.component('RowTitle', RowTitle)

3.src\utils\generator\config.js 中添加

// 展示型组件 【左面板】
export const showComponents = [
  {
    __config__: {
      layout: 'showFormItem',
      tag: 'row-title',
      tagIcon: 'row',
      label: '标题容器',
      document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
    },
    titleText: '标题',
    fontSize: 20,
    fontColor: '#606266',
    fontWeight: false,
    textAlign: 'left',
  },
]

4.src\views\tool\build\index.vue 中添加，这样左侧会多一个展示型组件，标题

import {
  inputComponents,
  selectComponents,
  layoutComponents,
  showComponents,    // 此处为新增
  formConf,
} from "@/utils/generator/config";

data() {
    return {
      showComponents, 		// 并在data中新增
      leftComponents: [
        {
          title: "输入型组件",
          list: inputComponents,
        },
        {
          title: "选择型组件",
          list: selectComponents,
        },
        {
          title: "布局型组件",
          list: layoutComponents,
        },
        {
          title: "展示型组件",						// 这里也要新增
          list: showComponents,
        },
      ],
  },

5.src\views\tool\build\RightPanel.vue中增加右侧的对应配置内容，到这里就差不多了，但是当复制代码或导出文件时会报错，于是根据报错信息，找到报错文件做出相应修改，也就是第六步

<!-- 标题文字 -->
          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题文字">
            <el-input v-model="activeData.titleText" placeholder="请输入标题文字" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题大小">
            <el-input v-model.number="activeData.fontSize" type="number" placeholder="请输入标题文字大小" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="标题颜色">
            <el-color-picker v-model="activeData.fontColor" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="是否加粗">
            <el-switch v-model="activeData.fontWeight" />
          </el-form-item>
          <el-form-item v-if="activeData.__config__.tag === 'row-title'" label="对齐方式">
            <el-radio-group v-model="activeData.textAlign">
              <el-radio-button label="left">
                居左
              </el-radio-button>
              <el-radio-button label="center">
                居中
              </el-radio-button>
              <el-radio-button label="right">
                居右
              </el-radio-button>
            </el-radio-group>
          </el-form-item>

6.src\views\tool\build\DraggableItem.vue中增加title的layouts

showFormItem(h, currentItem, index, list) {
    const { activeItem } = this.$listeners
    const config = currentItem.__config__
    const className = this.activeId === config.formId
      ? 'drawing-row-item active-from-item'
      : 'drawing-row-item'
    const spanText = 'row'+config.formId
    return (
      <el-col span={config.span}>
        <el-row gutter={config.gutter} class={className}
          nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
          <span class="component-name">{spanText}</span>
          <h1>
            <render key={config.renderKey} conf={currentItem} onInput={ event => { this.$set(config, 'defaultValue', event) }}></render>
          </h1>
          {components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    )
  },

7.src\utils\generator\html.js 中增加处理，先在layouts里加第一段，再在tags里加第二段

第一段
showFormItem(scheme) {
    const config = scheme.__config__
    const tagDom = tags[config.tag] ? tags[config.tag](scheme) : null
    let str = `<el-row>
      ${tagDom}
    </el-row>`
    str = colWrapper(scheme, str)
    return str
  }
第二段
'row-title': el => {
    return `<h1 style="font-size: ${el.fontSize}px;color: ${el.fontColor};font-weight: ${el.fontWeight ? 600 : 400};text-align: ${el.textAlign};">${el.titleText}</h1>`
  },

至此大功告成。
复制代码选择弹框模式，出来以后就是这样的：

<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Title">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-row>
              <h1 style="font-size: 32px;color: #234485;font-weight: 600;text-align: left;">我是标题</h1>
            </el-row>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>

希望能带给你启示。