持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

写在前面

前面两篇文章已经对低代码相关的拖拽操作进行了简单的探索，完成了拖拽编辑，那么接下来就是对组件相关参数的编辑与配置了，由于每个组件的参数都不相同，也没有什么共同点可寻，所以对于每个组件，我们都需要给他们单独编辑一个“身份证”，用于识别组件相关的参数以及参数的类型等信息，那么我们该如何定义呢，接下来就让我们一起来探索探索。

组件参数配置

对于每个组件的参数，总的来说可以分为3类，第一类是最常见的，直接传入字符串或数字、数组等，这种我们把它称为 input 类，第二种为二选一的我们把它称为 boolean 类，最后一种为多个选项选一个的，我们称为 select 类，接下来我们来看看如何写组件的“身份证”

组件参数信息定义

为了使得配置者能够做到该参数对应组件的什么配置，所以标识表中我们要写的第一项是描述 describe，而决定该配置是什么类型的配置，则需要有一个配置项，为类型 type，然后还有一个是当组件的类型 type 为 select 时，需要额外提供一个选项 options，用于存放选项，大致就这三个参数，实例如下

{
  "CPN1": {
    "name": {
      "type": "input",
      "describe": "名称"
    },
    "border": {
      "type": "boolean",
      "describe": "边框"
    },
    "color": {
      "type": "select",
      "describe": "背景颜色",
      "options": ["white","black"]
    }
  }
}

参数信息与配置界面绑定

定义好了参数信息，接下来一步就是如何利用界面来动态修改参数了。这里我们通过引入 ElementUI 来快速搭建编辑参数的相关小组件。

安装并引入 ElementUI

npm i element-ui -S

// main.js 引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

展示所有配置项

1、通过 v-for 将所有配置项展示到配置框中

2、通过各个配置项的类型选择显示需要使用的配置小组件

3、将配置小组件的数值和源组件相关的数值进行绑定，完成联动效果

示例如下

<div class="setting-item" v-for="(item, key) in settingList" :key="item.describe">
  <div class="name">{{item.describe}}</div>
  <div class="set-cpn">
    <!-- input 类型-->
    <el-input
      v-if="item.type === 'input'"
      v-model="cpnProps[key]"
      placeholder="请输入内容">
    </el-input>
    <!-- boolean 类型 -->
    <el-switch
      v-if="item.type === 'boolean'"
      v-model="cpnProps[key]"
    >
    </el-switch>
    <!-- select 类型 -->
    <el-select 
      v-if="item.type === 'select'"
      v-model="cpnProps[key]" placeholder="请选择">
      <el-option
        v-for="op in item.options"
        :key="op"
        :label="op"
        :value="op">
      </el-option>
    </el-select>
  </div>
</div>