1. 新增组件

第一步在componentsConfig.js添加配置项

{
    type: 'steps',//组件类型
    icon: 'icon-buzhouliebiao',//图标配置 iconfont下载
    options: {//默认配置项
      defaultValue: 0,
      ...
    }
  },

由于支持多语言 需要修改zh-CN中的中文配置才会显示中文
操作完这些以后你会发现左侧面板还是没有显示，我们还需要把Container.vue中的basicFields中的默认配置项中添加我新增的组件type值

basicFields: {
      type: Array,
      default: () => ['input',..., 'text','steps']
    },

第二步开始添加组件,中间画布区域展示的是写在WidgetFormItem.vue

<template v-if="element.type == 'steps'">
      <el-steps :active="element.options.defaultValue" finish-status="success">
        <el-step v-for="(item,index) in element.options.options" :title="item.title" :description="item.description" :key="index"></el-step>
      </el-steps>
 </template>

配置右侧属性面板--在WidgetConfig.vue文件中

<template v-if="data.type=='steps'">
    <el-form-item :label="$t('fm.config.widget.stepsSpace')">
      <el-input-number  v-model.number="data.options.space"></el-input-number>
    </el-form-item>
    <el-form-item :label="$t('fm.config.widget.stepsDirection')">
      <el-radio-group v-model="data.options.direction" size="medium">
        <el-radio-button label="horizontal">Horizontal</el-radio-button>
        <el-radio-button label="vertical" >Vertical</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item :label="$t('fm.config.widget.stepsProcessStatus')">
      <el-select v-model="data.options.processStatus">
        <el-option value="wait" label="wait"></el-option>
        <el-option value="process" label="process"></el-option>
        <el-option value="finish" label="finish"></el-option>
        <el-option value="error" label="error"></el-option>
        <el-option value="success" label="success"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('fm.config.widget.stepsSimple')">
      <el-switch v-model="data.options.simple"></el-switch>
    </el-form-item>
  </template>

添加选项属性

<template v-if="data.type=='steps'">
    <el-radio-group v-model="data.options.defaultValue">
      <draggable tag="ul" :list="data.options.options"
        v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
        handle=".drag-item"
      >
        <li v-for="(item, index) in data.options.options" :key="index" >
          <div style="display: flex;">
              <el-radio class="steps-radio"
              :label="index"
              style="margin-right: 5px;display: flex;"
            >
              <div style="display: flex;flex-direction: column;gap: 5px;">
                <el-input style="width:180px;" size="mini" v-model="item.title" placeholder="Title"></el-input>
                <el-input style="width:180px;" size="mini" v-model="item.description" placeholder="Description"></el-input>
              </div>
            </el-radio>
            <div style="align-self: center;">
              <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
              <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
            </div>
          </div>
        </li>
      </draggable>
    </el-radio-group>
 </template>

最后还需要在生成预览的组件(GenerateFormItem.vue)文件中添加相应的代码

<template v-if="widget.type == 'steps'">
  <el-steps 
    :active="dataModel" 
    :space="widget.options.space" 
    :direction="widget.options.direction" 
    :process-status="widget.options.processStatus" 
    :align-center="widget.options.alignCenter" 
    :simple="widget.options.simple" 
    finish-status="success"
  >
      <el-step v-for="(item,index) in widget.options.options" :title="item.title" :description="item.description" :key="index"></el-step>
  </el-steps>
</template>

2. 项目中使用

在vue-cli构建的项目中通过引用js的方式引入

在index.html中引入用到的js以及css

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">

<!-- 需要在设计器中预览代码需要引入ace.js库 -->
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/ace/1.4.14/ace.min.js" type="application/javascript"></script>

在组件中引入

表单设计器

  import {MakingForm} from '@/utils/FormMaking.umd' //FormMaking.umd.js存放位置
  components:{'fm-making-form':MakingForm} //注册组件
  //组件使用
  <fm-making-form style="height: 100%;" ref="makingform"  upload preview  generate-code  generate-json clearable>
  </fm-making-form>
  //调用setJSON方法传入数据可生成表单
  this.$refs.makingform.setJSON(JSON.parse(json))
  //默认设置第一个表单组件选中
  this.widgetFormSelect = this.$refs.makingform.widgetForm.list[0]

表单生成器

  import {GenerateForm} from '@/utils/FormMaking.umd' //FormMaking.umd.js存放位置
  components:{'fm-generate-form':GenerateForm} //注册组件
  //组件使用
  <fm-generate-form :data="jsonData" ref="generateForm">
  </fm-generate-form>
  //jsonData为表单生成器所需要的数据
  //高级版赋值调用setData方法、基础版无setData方法
  this.$refs.generateForm.getData().then(data => {
    console.log(data);//获取表单填写数据
})

遇到的问题:多语言项目中需要配置，不然会以中文显示--在main.js文件可进行配置

import {GenerateForm,MakingForm} from '@/utils/FormMaking.umd'
Vue.use(MakingForm, {lang: 'zh-CN', i18n})
Vue.use(GenerateForm, {lang: 'zh-CN', i18n})