手摸手教程：如何实现一个可编程的Vue动态表单？

来自产品MM的需求

1. 首先看一个简单的表单需求，下面是一个简单数据收集表的一部分，选择“立即生效”后出现
   "生效日期"且必填。
   

用Vue + Element UI很容易实现这个需求，开动VSCode一顿常规操作，10分钟收工。

2. 第二天产品MM又找过来了，需求有一丢丢改动，如下图示：

活动类型为冲单或回馈时，支持生效条件；条件支持活动人数、活动天数(二者为且的关系)

肿么办？启动VSCode，又是一通常规操作，这次改动麻烦一点，一个小时收工，当然要发布上线的话，还免不了推送、构建、测试、打包、重新部署。

3. 然鹅，游戏并没有over，过两天产品MM又来找你了，因为需求疏漏了一个地方：生效条件需要加上“峰值”判断，如下图所示：
   

如此循环往复，需求永远在不停迭代，前端开发疲于奔命，终于有一天你变成了这般模样：

解决之道

针对上述这种非常多变的表单需求，简单分析一下，变动的主要是表单控件和逻辑判断，所以首先想到的就是开发一个配置式的表单，设计一个全新的表单schema规范，然后根据schema编写表单JSON对象，最后由表单JSON动态生成表单。下面就是一段常见的基于schema的表单JSON代码：

{
      title: '活动类型',
      key: 'act_type',
      type: 'radio',
      props: {
        options: { 1: '拉新', 2: '冲单', 3: '回馈' }
      }
},

这种思路已经非常成熟了，有非常多成熟的开源表单项目采用了这种思路，但这个方案有两个比较明显的缺点：

1. 使用者需要学习表单schema规范；

2. 难于实现复杂的表单交互逻辑。

为了解决第一个schema规范学习成本的问题，可以基于表单schema开发一个拖拽式的所见即所得的在线表单设计器，这个也有非常多的开源项目实现了，各种form generator、form creator等等，鄙人不才也搞了一个VForm，有兴趣的童鞋可以尝尝鲜：

VForm，一个Vue动态表单设计器，==>>点此体验

为了解决第二个问题，如何实现动态表单的复杂交互逻辑，也是本文的主要目标，本文的解决思路是——为动态表单增加可编程接口，即通过组件的交互事件和API方法实现交互逻辑，JS代码才是王道。

实现表单的可编程接口

从第一部分的表单需求来分析，要实现表单交互逻辑，第一步是暴露组件的交互事件，比如“活动类型”组件点击改变后触发的onChange事件；第二步就是在事件中对组件进行精确操控，比如显示或隐藏某些组件、设置组件必填属性、设置组件禁用状态、添加或移除组件CSS样式等等。
第一步非常简单，只要给表单schema增加组件的自定义事件属性即可，下面schema给input组件增加了7个自定义事件：

  {
    type: 'input',
    icon: 'text-field',
    formItemFlag: true,
    options: {
      name: '',  //组件基本属性
      label: '',
      labelAlign: '',
      type: 'text',
      defaultValue: '',
      placeholder: '',
      //-------------------
      onCreated: '',  //自定义事件
      onMounted: '',
      onInput: '',
      onChange: '',
      onFocus: '',
      onBlur: '',
      onValidate: '',
    },
  },

接下来需要加入一个支持语法高亮、代码提示的代码编辑器组件，这里选择成熟、久经考验的AceEditor，GitHub有一个打包好的ace-builds，安装使用十分简单：

安装ace：npm i ace-builds

然后基于ace封装一个简单的JS代码编辑器，截取部分代码如下所示：