前言

select 下拉框，想必我们都经常用的，不论是表单提交还是搜索，都常有它的身影，现在的组件库也都有封装相关组件，如 ant-design-vue 的 a-select、element-ui 的 el-select，用法有普通的选择、多选、支持搜索和模糊搜索的选择、联动等，然而这么常见的组件却没有一个提供 beforeChange 勾子。

那么你有没有遇到过需要对 sele ct 切换进行拦截的操作？我今天就遇到了这样的需求，让我们来搞定它吧。

效果图：

在线测试地址

要点

各种 select 组件默认只提供了选项改变后的 change 事件回调，如果在 change 事件里绑定弹窗事件的话会导致，Modal 对话框弹出时选项已经改变，此时选择取消操作，则还需要数据回溯，视觉体验上也不好，属于先斩后奏；针对这个问题，还是要从拦截的角度来思考，下面是我提供的三种方案。

event.stopPropagation

这个思路是通过阻止事件的传播，来进行拦截的,可以给 a-select-option 下的dom 增加click 事件,加一个事件修饰符 click.stop (阻止单击事件继续传播)

因涉及一些执行语句，禁止写入，请联系客服获取

Object.defineProperty

Object.defineProperty() 方法允许通过属性描述对象，定义或修改一个属性，然后返回修改后的对象,具体语法可以看这本书 javascript 教程 的属性描述对象章节; 这里我用它的存值函数 set 来对 data.value 进行处理

因涉及一些执行语句，禁止写入，请联系客服获取

Proxy 拦截

Proxy 可以对 a-sel ect 的 value 进行拦截，然后修改其默认行为，这和直接修改 value 不同；等同于在语言层面做出修改，属于一种“元编程”（meta programming），即对编程语言进行编程。

具体语法可看下这本书: ECMAScript6 入门 的 proxy 章节，这里不多介绍了，还是直接上代码：

因涉及一些执行语句，禁止写入，请联系客服获取

顺带讲一下a-select 的 v-model, v-model 默认是只支持 input 事件的，ant-design-vue 的源码中用 model 选项重写了 v-model 指令，将其触发条件修改为 change。

model: {  prop: 'value',  event: 'change'  }

以上三种方案都可以实现我们要的效果，至于哪种更好这个地方不需要纠结，看自己喜好，因为这个需求还不足够复杂还体现不出它们的差异。

总结

今天通过一个 sel ect 拦截的需求（radio, checkbox 同理），给大家讲解了 事件传递、Object.defineProperty、proxy 相关知识的应用，不知你有没有发现，这些貌似工具库里才经常用到的特性，也可以很好的服务于日常业务开发，是不是一件很 cool 的事呢？看后你有收获吗？