来自产品MM的需求
用Vue + Element UI很容易实现这个需求,开动VSCode一顿常规操作,10分钟收工。
- 第二天产品MM又找过来了,需求有一丢丢改动,如下图示:
活动类型为冲单或回馈时,支持生效条件;条件支持活动人数、活动天数(二者为且的关系)
肿么办?启动VSCode,又是一通常规操作,这次改动麻烦一点,一个小时收工,当然要发布上线的话,还免不了推送、构建、测试、打包、重新部署。
如此循环往复,需求永远在不停迭代,前端开发疲于奔命,终于有一天你变成了这般模样:
解决之道
针对上述这种非常多变的表单需求,简单分析一下,变动的主要是表单控件和逻辑判断,所以首先想到的就是开发一个配置式的表单,设计一个全新的表单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代码编辑器,截取部分代码如下所示: