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

来自产品MM的需求

  1. 首先看一个简单的表单需求,下面是一个简单数据收集表的一部分,选择“立即生效”后出现
    "生效日期"且必填。
    手摸手教程:如何实现一个可编程的Vue动态表单?_第1张图片

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

  1. 第二天产品MM又找过来了,需求有一丢丢改动,如下图示:
活动类型为冲单或回馈时,支持生效条件;条件支持活动人数、活动天数(二者为且的关系)
手摸手教程:如何实现一个可编程的Vue动态表单?_第2张图片

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

  1. 然鹅,游戏并没有over,过两天产品MM又来找你了,因为需求疏漏了一个地方:生效条件需要加上“峰值”判断,如下图所示:
    手摸手教程:如何实现一个可编程的Vue动态表单?_第3张图片

如此循环往复,需求永远在不停迭代,前端开发疲于奔命,终于有一天你变成了这般模样:
手摸手教程:如何实现一个可编程的Vue动态表单?_第4张图片

解决之道

针对上述这种非常多变的表单需求,简单分析一下,变动的主要是表单控件和逻辑判断,所以首先想到的就是开发一个配置式的表单,设计一个全新的表单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代码编辑器,截取部分代码如下所示:




                    
                    

你可能感兴趣的:(手摸手教程:如何实现一个可编程的Vue动态表单?)