来自产品MM的需求先来看一个简单的表单需求。以下是一个简单的数据收集表格的一部分。选择“立即生效”后，会出现一个“生效日期”，需要填写。用Vue+ElementUI很容易实现这个需求，启动VSCode进行常规操作，10分钟收工。第二天，产品MM又回来了，需求略有变化，如下图：当活动类型为订单兑现或反馈时，支持有效条件；条件支持活动人数和活动天数（两者的关系）肿么办？启动VSCode是另一个常规操作。这次改的比较麻烦一点，需要一个小时才能完成。当然，如果要发布到线上，就免不了push、build、test、package、redeploy。然而，游戏还没有结束。过两天产品MM又来找你了，因为需求漏了一个地方：有效条件需要加上“峰值”判断，如下图：在这个周期中，需求会neverstopIteration，前端开发累死了，终于有一天你变成了这样：想到的是开发一个配置表单，设计一个新的表单模式规范，然后根据模式编写表单JSON对象，最后从表单JSON动态生成表单。下面是一个常见的基于模式的表单JSON代码：{title:'activitytype',key:'act_type',type:'radio',props:{options:{1:'pullnew',2:'order',3:'Feedback'}}}，这个思路很成熟，很多成熟的开源表单项目都采用了这个思路，但是这个方案有两个明显的缺点：1.用户需要学习Formschema规范；2、难以实现复杂的表单交互逻辑。为了解决第一个模式规范的学习成本问题，可以开发基于表单模式的拖放式所见即所得的在线表单设计器。也有很多开源项目实现了这个，比如各种表单生成器，表单创建器等等，等等，我也创建了一个VForm。有兴趣的童鞋可以尝试一下：VForm动态表单设计器VForm，==>>点此体验如何实现动态表单复杂的交互逻辑，以解决第二个问题，也是本文的主要目的.本文的解决方案是在动态表单中加入可编程的接口，即通过组件交互事件和API方法来实现交互逻辑，JS代码才是王道。从表单需求的第一部分分析了表单可编程接口的实现。实现表单交互逻辑，首先要暴露组件的交互事件，比如“活动类型”组件被点击改变后触发的onChange事件；第二步是在事件中对组件进行精确操作，例如显示或隐藏某些组件、设置组件所需的属性、设置组件的禁用状态、添加或删除组件的CSS样式等。第一步很简单，只需要将组件的自定义事件属性添加到表单schema中，下面的schema将7个自定义事件添加到input组件中：{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：npmiace-builds然后封装了一个简单的基于ace的JS代码编辑器。截取部分代码如下：
