手摸手教程（如何实现一个可编程的Vue动态表单（））
来自产品MM的需求
- 首先看一个简单的表单需求，下面是一个简单数据收集表的一部分，选择“立即生效”后出现
"生效日期"且必填。
文章图片
- 第二天产品MM又找过来了，需求有一丢丢改动，如下图示：
活动类型为冲单或回馈时，支持生效条件；条件支持活动人数、活动天数(二者为且的关系)肿么办？启动VSCode，又是一通常规操作，这次改动麻烦一点，一个小时收工，当然要发布上线的话，还免不了推送、构建、测试、打包、重新部署。
文章图片
- 然鹅，游戏并没有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代码编辑器，截取部分代码如下所示：
import ace from 'ace-builds'
/* 启用此行后webpack打包回生成很多动态加载的js文件，不便于部署，故禁用！！
特别提示：禁用此行后，需要调用ace.config.set('basePath', 'path...')指定动态js加载URL！！
*/
//import 'ace-builds/webpack-resolver'import 'ace-builds/src-min-noconflict/theme-sqlserver' // 新设主题
import 'ace-builds/src-min-noconflict/mode-javascript' // 默认设置的语言模式
import 'ace-builds/src-min-noconflict/mode-json' //
import 'ace-builds/src-min-noconflict/mode-css' //
import 'ace-builds/src-min-noconflict/ext-language_tools'
import {ACE_BASE_PATH} from "@/utils/config";
export default {
name: 'CodeEditor',
props: {
value: {
type: String,
required: true
},
readonly: {
type: Boolean,
default: false
},
mode: {
type: String,
default: 'javascript'
},
userWorker: {//是否开启语法检查，默认开启
type: Boolean,
default: true
},},
mounted() {
ace.config.set('basePath', ACE_BASE_PATH)
},
//省略methods方法...
}给CodeEditor增加代码提示：
addAutoCompletion(ace) {
let acData = https://www.it610.com/article/[
{meta:'VForm API', caption: 'getWidgetRef', value: 'getWidgetRef()', score: 1},
{meta: 'VForm API', caption: 'getFormRef', value: 'getFormRef()', score: 1},
//TODO: 待补充！！
]
let langTools = ace.require('ace/ext/language_tools')
langTools.addCompleter({
getCompletions: function(editor, session, pos, prefix, callback) {
if (prefix.length === 0) {
return callback(null, []);
}else {
return callback(null, acData);
}
}
})
}封装后的CodeEditor效果如下（此处使用VForm演示）：
文章图片
交互事件有了，接下来实现组件的操控API方法，这里又分两步走：
1. 获取到组件ref；
2. 调用组件的methods属性中的方法；
首先给表单增加一个refList的provider属性，在组件中inject注入，当每个组件创建时将本组件实例注入refList对象：
//...此处省略
inject: ['refList'],
//...此处省略
created() {
this.registerToRefList()
},
methods: {
registerToRefList() {
this.refList[this.field.options.name] = this
},
//...此处省略
}接下来，再封装一个简单的getWidgetRef方法，该方法通过组件名称获取到组件实例：
getWidgetRef(widgetName, showError) {
let foundRef = this.refList[widgetName]
if (!foundRef && !!showError) {
this.$message.error('Ref not found')
}
return foundRef
},通过组件实例即可调用methods属性中的组件方法，组件方法可以任意扩充。
实现一个简单的点击事件交互：
/* 下述代码在“喜欢喝酒还是饮料？”单选按钮onChange事件中执行 */
var alcoholChkWidget = this.getWidgetRef('alcoholChk')
var drinkChkWidget = this.getWidgetRef('drinkChk')if (value =https://www.it610.com/article/== 1) {
alcoholChkWidget.setHidden(false)//setHidden是自定义的API方法，控制组件显示或隐藏
drinkChkWidget.setHidden(true)
} else {
alcoholChkWidget.setHidden(true)
drinkChkWidget.setHidden(false)
}交互效果如下：
文章图片
需要提醒的是，交互事件中的js代码是在表单运行期间执行，代码不会被Babel编译，具体执行过程是：通过Function生成一个匿名函数，传入指定参数后执行，没有使用低效且不安全的eval方法。
如果要调试交互JS代码也非常简单，只需要在代码中需要下断点的位置加入"debugger"，代码执行到此处会进入调试状态（Chrome内核的浏览器都支持）。
结论
综上所述，实现一个可编程的Vue动态表单，大体实现思路如下：
1.设计一个表单schema规范，基于该schema规范开发一个拖拽式的表单设计器；
2.暴露组件的交互事件，并按需求实现组件的API方法；
3.提供一个语法高亮、有代码提示功能的JS代码编辑器；
4.通过在交互事件中调用组件API方法，即可实现表单复杂交互逻辑；
5.完美实现预定目标。
鄙人的新轮子VForm完全实现了上述功能，有兴趣的小伙伴可以体验尝试。
点此立即体验
【手摸手教程（如何实现一个可编程的Vue动态表单（））】详细使用文档：VForm专栏
推荐阅读
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- java中如何实现重建二叉树
- Linux下面如何查看tomcat已经使用多少线程
- thinkphp|thinkphp 3.2 如何调用第三方类库