封装第三方组件（24）给element-plus 的表单子控件增加一个防抖的功能

element-plus

element-plus 功能非常强大，但是好像只有 el-autocomplete 提供了一个防抖功能，其他表单子控件并没有提供防抖功能，而 el-autocomplete 的防抖和我想要的效果又不太一样，所以只好写个函数实现我想要的防抖效果。

需求

Vue是响应性和双向绑定的，用户在文本框输入一个字母，就会立即响应，如果是表单的话问题不大，但是如果是查询的话，就有点不方便。

比如用户想查询“Vue”：
输入 v 后立即响应，去后端查询“v”；
然后输入u，又立即响应去后端查询“vu”；
然后输入e，又立即响应去后端查询“vue”。

显然只有最后一次查询才是我们希望的，而前两次是无效查询。

如果响应时不立即查询的话，那么就需要用户在输入完毕后，还要去按“查询”按钮，这样多了一步操作，不是很方便。

这时候就需要防抖功能出场了。

功能

• 支持 el-input 的防抖
• 支持 el-checkbox-group 等其他表单子控件的防抖
• 支持汉字输入的防抖
• 使用简单，可以灵活设置

技术栈

• Vue3.2
• Vite2
• element-plus

设计函数

原始防抖代码来自于Vue官网，介绍 customRef（https://v3.cn.vuejs.org/api/refs-api.html#customref）时使用的例子，感觉挺简洁的，于是就拿过来改了改。

核心代码：（来自Vue官网）

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get () {
        track()
        return value
      },
      set (newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

是不是很简单，就是用 setTimeout 设置一个延迟提交的功能，然后每次 set 先把之前的 setTimeout 给撤销掉，这样就只保留最后一次的 setTimeout 。

这个函数用在原生 input 上面是没有问题的，但是放在 el-input 里面，就出现了一点小问题，防抖后只会出现最后一次按的字母，之前输入的字母“消失”了。输入汉字也是很怪异的样子。

用console.log在 set 和 ge t的地方分别打印 value、newValue 值，对比一下发现了问题。

• 原生 input
  触发 set 的时候，newValue 的值 = 原来的值 + 录入的全部值。
  input 实时显示录入内容，但是 model 延迟后才会响应变化。

• el-input
  触发 set 的时候，newValue 的值 = 原来的值 + 录入的最后一个值（先敲的消失了）。
  el-input 并不会实时显示录入内容，而是等延迟后才会更新的内容。

发现不同后我们就可以想办法解决问题了，我们建立一个 debounceRef.js 的文件：

debounceRef.js

import { customRef, watch } from 'vue'

/**
 * 控件的防抖输入
 * @param { object } props 组件的 props
 * @param { object } events 事件集合，run：立即提交；clear：清空计时，用于汉字输入
 * @param { object } emit 组件的 emit
 * @param { number } delay 延迟时间，默认500毫秒
 * @param { string } name v-model的名称，默认 modelValue，用于emit
 */
const debounceRef = (props, events = {}, emit = () => {}, delay = 500, name = 'modelValue') => {
  // 计时器
  let timeout = null

  // 内部变量，直接给控件赋值。
  // 初始化设置属性值
  let _value = (typeof props.model === 'object') ? 
    props.model[props.colName] :
    props[name]
  
  // 提交给属性
  const _setValue = (__val) => {
    if (typeof props.model === 'object') {
      props.model[props.colName] = __val
    } else {
      emit(`update:${name}`, __val)
    }
  }

  /**
   * 立即提交的事件
   */
  events.run = () => {
    clearTimeout(timeout) // 清掉上一次的计时
    _setValue(_value)
  }

  /**
   * 清掉上次计时，用户汉字的连续输入
   */
  events.clear = () => {
    clearTimeout(timeout) // 清掉上一次的计时
  }
  
  return customRef((track, trigger) => {
    // 监听父组件的属性变化，然后赋值
    if (typeof props.model === 'object') {
      watch(() => props.model[props.colName], (v1) => {
        _value = v1
        trigger()
      })
    } else {
      watch(() => props[name], (v1) => {
        _value = v1
        trigger()
      })
    }

    return {
      get () {
        track()
        return _value
      },
      set (val) {
        _value = val // 绑定值
        trigger() // 输入内容绑定到控件，但是不提交
        clearTimeout(timeout) // 清掉上一次的计时
        timeout = setTimeout(() => {
          _setValue(val) // 提交
        }, delay)
      }
    }
  })
}

export default debounceRef

因为这是基于二次封装组件设置的函数，所以参数涉及了组件的 props 和 emit ，有的时候再次封装一下，可以让代码更简洁。

• 防抖输入
  设置一个内部变量 _value ，用于保存输入的内容，直接给组件赋值。
  同时用 watch 监听属性的变化，有变化了就赋值给 _value，然后调用 trigger() 更新模板。
  这样可以达到一种比较好的体验效果，el-input 可以实时显示录入的信息，外部也可以通过属性进行赋值。

• 汉字的问题
  一般的汉字输入法，在敲字的时候，并不会立即触发 set，这样造成输入英文、数字和输入汉字的延迟时间不一致的问题。
  解决方法就是设置“键盘按下”事件，在事件里面清除 setTimeout （使用 clear 事件实现），这样就可以保持输入英文和汉字是一样的时间延迟了。

• 立即提交的问题
  输入完毕后希望立即提交，而不必等到延迟时间到了再提交，这里的解决方案是加处理事件。
  el-input 提供了几个事件，比如失去焦点，按回车等事件，那么可以在这些事件里面清除 setTimeout ，然后立即提交即可，通过 run 函数实现。

封装控件

为了更方便使用，我们可以基于 el-input 做二次封装，建立一个 text.vue 的文件。

text.vue，模板：

代码：

  import debounceRef from '../js/debounceRef.js'
 
  // 设置属性
  const props = defineProps({
    modelValue: [String, Number],
    model: Object,
    colName: String
  })

  // 设置提交
  const emit = defineEmits(['update:modelValue'])
  
  const events = {
    run: () => {},
    clear: () => {}
  }
  const value = debounceRef(props, events, emit)

  // 在点击由 clearable 属性生成的清空按钮时触发
  const myclear = () => {
    events.run() // 立即执行
  }

  // 仅在输入框失去焦点或用户按下回车时触发
  const mychange = () => {
    events.run() // 立即执行
  }
  // 在 Input 失去焦点时触发
  const myblur = () => {
    events.run() // 立即执行
  }
  // 按键，用于汉字的连续输入
  const mykeydown = (e) => {
    // console.log('按键信息：', e)
    events.clear()
  }

这样在使用的时候就可以很方便了。

使用封装的控件

模板：

代码：

  const retUser = reactive({
    name: '对象的响应性',
    address: '',
    age: 18,
    like: []
  })

• v-model vs proxy
  一般都是使用 v-model 的方式来实现双向绑定，但是我感觉有点绕圈圈，既然表单有一个 model 对象，那么为啥不能直接修改呢？
  于是设置了这种兼容方式，可以使用 v-model，也可以传入 model 和 属性名称，然后在子组件里面就可以通过 proxy 的 set 拦截的方式实现“直接”的修改。

不封装组件，直接使用

如果我就是不想封装，我想直接用行不行？当然是可以的，只需要设置好参数即可。

  const retUser = reactive({
    name: '对象的响应性',
    address: '',
    age: 18,
    like: []
  })

  const addressProps = {
    model: retUser,
    colName: 'address'
  }

  const events = {
    run: () => {},
    clear: () => {}
  }

  const address = debounceRef(addressProps, events)
  // 按键，用于汉字的连续输入
  const mykeydown = (e) => {
    events.clear()
  }

依据 model 设置对象，再设置回调函数的对象即可。然后的用法类似于 computed。

当然这样看起来就比较麻烦了，因为一开始就是基于二次封装组件来设计的。

除了文本框还支持其他吗？

各种表单子控件，基本都支持，比如CheckBoxGroup等，虽然其 value 是数组形式，但是也同样支持的，效果就是：选择选项一、二、三，然后一起响应。

  // 设置属性
  const props = defineProps({
    modelValue: [Array],
    model: Object,
    colName: String
  })

  const emit = defineEmits(['update:modelValue'])
  
  const events = {
    run: () => {},
    clear: () => {}
  }
  const checkList = debounceRef(props, events, emit)

这里就不需要设置各种事件了。

总结

个人感觉还是挺方便的。你可能觉得没必要二次封装，其实上面介绍的封装，只是整个二次封装的一小部分代码，还有其他各种功能。

不知道大家有没有猜出来我想实现什么功能？