Select 下拉框切换拦截的三种方案|【Proxy】

简介: Select 下拉框切换拦截的三种方案|【Proxy】

前言


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

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


效果图:


1687778714106.png


在线测试地址


要点


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

event.stopPropagation

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


// 伪代码
<a-select-option value="上海">
  <div @click.stop="handleClick">上海测试</div>
</a-select-option>
methods: {
    handleClick(item) {
        let _this = this
        _this.$confirm({
            title: "确认要切换么?",
            content: "切换经销商将重新载入页面数据",
            mask: false,
            onOk() {
              _this.data.value = item.value
            },
            onCancel() {},
          });
    }
}


Object.defineProperty


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


<a-select
    centered
    default-value="lucy"
    style="width: 120px"
    v-model="data.value"
    >
    <a-select-option value="上海"> 上海测试 </a-select-option>
    <a-select-option value="河南"> 河南测试 </a-select-option>
    <a-select-option value="深圳">深圳测试</a-select-option>
</a-select>
methods: {
   initProxy() {
      let _this = this
      Object.defineProperty(this.data, "value", {
        set: function (value) {
          _this.$confirm({
            title: "确认要切换么?",
            content: "切换经销商将重新载入页面数据",
            mask: false,
            onOk() {
              return value
            },
            onCancel() {},
          });
        },
      })
  },
  mounted() {
    this.initProxy()
  }


Proxy 拦截


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

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


<a-select
    centered
    default-value="lucy"
    style="width: 120px"
    v-model="data.value"
    >
    <a-select-option value="上海"> 上海测试 </a-select-option>
    <a-select-option value="河南"> 河南测试 </a-select-option>
    <a-select-option value="深圳">深圳测试</a-select-option>
</a-select>
  methods: {
    initProxy() {
      let _this = this;
      this.data = new Proxy(
        { value: "上海" },
        {
          set: function (target, propKey, value) {
            return _this.$confirm({
              title: "确认要切换么?",
              content: "切换经销商将重新载入页面数据",
              mask: false,
              onOk() {
                target["value"] = value
              },
              onCancel() {},
            })
          },
        }
      )
    },
  },
  mounted() {
    this.initProxy()
  },


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


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


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


总结


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

目录
相关文章
解决el-table中横向滚动条无法显示的问题
解决el-table中横向滚动条无法显示的问题
2745 0
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
2031 0
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
Element el-select 选择器(下拉框)详解
本文目录 1. 用途 2. 数据绑定 2.1 固定选项 2.2 选项绑定数组 3. 功能效果 3.1 可清空选项 3.2 多选 3.3 可搜索 4. 事件响应 5. 小结
6725 0
Element el-select 选择器(下拉框)详解
|
8月前
如何在组件的 slot 元素中添加样式
【10月更文挑战第25天】如何在组件的 slot 元素中添加样式
157 2
vue 批量绑定属性(你可能没这样用过 v-bind)
vue 批量绑定属性(你可能没这样用过 v-bind)
335 0
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
本文介绍了在Vue项目中使用`xlsx`和`xlsx-style`(或`xlsx-style-vite`)库实现导出具有自定义样式的Excel文件的方法,并提供了详细的示例代码和操作效果截图。
1804 2
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
听说在 Vue 3 中实现动态表单很难?作为一个前端开发者,表示一切都是小意思!!
听说在 Vue 3 中实现动态表单很难?作为一个前端开发者,表示一切都是小意思!!
vue父子组件传值,父组件内容更新子组件内容不实时更新
vue父子组件传值,父组件内容更新子组件内容不实时更新
3198 0
|
12月前
|
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
1686 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问