blur 指令查询

故事背景: 前几天产品要求把 外呼 模块输入框加上 blur 事件查询, 本是一个很简单的需求, 但是测试测试时提出了一个 bug, 说输入框获取焦点再失去焦点什么事都没做, 你为什么要去请求接口查询。本想打算打回的, 但想想说的也挺合理的(我不会说只要是妹子提的 bug, 干肾我也会改啊), 其实做的时候就已经意识到这个问题确实对交互不怎么友好, 也想到一个解决方案(输入框获取焦点时获取值保存起来, 失去焦点时再次获取值然后进行比较, 如果不相同就去调用查询接口), 奈何当时一个页面好多输入框, 想想要在 data 中加入好多字段就放弃了。下午看到 bug, 突然灵机一动, 我是不是可以写个自定义指令, 在指令里处理我的代码逻辑, 业务代码基本不受干扰了。
自定义指令如下:

export default {
  blurQuery: {
    bind (el, binding) {
      let oldValue = '' // 闭包存储 focus 时的值
      el.querySelector('input').onfocus = function(e) { // 获取焦点触发事件
        oldValue = e.target.value
      }
      el.querySelector('input').onblur = function(e) { // 失去焦点触发事件
        let newValue = e.target.value
        oldValue !== newValue && binding.value() // 比较新旧值, 如果不同,就去调用自定义指令绑定方法
      }
    }
  }
}

业务代码如下:

<el-input
  size="small"
  class="mr-24"
  style="width:200px;"
  placeholder="请输入被叫号码"
  v-model="customerNumber"
  v-blurQuery="() => { handleCurrentChange(1) }" // 此行代码就是当前自定义指令
  @keyup.enter.native="handleCurrentChange(1)" 
  @input="customerNumber=customerNumber.replace(/[^\d]/g,'')"
></el-input>

习惯写 vue 的同学看到以上代码块可能觉得有点奇怪, 为啥要用一个 箭头函数 来处理, 直接用 handleCurrentChange(1) 不行吗? 还真不行, 我们来看一下 vue 自定义指令 bind 说明:

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

看到以上说明大家应该都懂了, 如果使用 handleCurrentChange(1), 指令第一次绑定就会立即执行这个方法, 所以我们 在外面又包了一层函数, 这样就很好的解决问题了, 写 react 的同学,对此写法应该再熟悉不过了。

来看下业务页面

image.png
以上指令虽然解决了无效请求的问题, 但是我们输入框获取焦点时在不失去焦点的情况下立即点击重置按钮, 是不是也会触发 blur 事件(js 执行机制是 blur 事件 优于 click 事件, 这就导致 重置按钮第一次点击无效, 单纯的我一开始还以为遇到了什么莫名奇妙的 bug 😁), 发现问题就要解决问题嘛! 我们怎么阻止第一次接口调用呢, 其实很简单, 我们加一个 防抖函数就可以啦。

这里推荐一下在 vue 里 methods 方法 一个优雅的写法

 handleCurrentChange: debounce(function (i) {
    this.pageNum = i
    this.loadData()
 }, 50)

以上就解决了我们的问题啦, 通过写指令的方式成功的与业务代码块脱离, 也更加方便团队以后使用, 这样的交互普遍还是存在的, 现在想想自己还真是一个小机灵鬼, 给自己点个赞👍🏻。