element-ui input debounce 自定义指令-防抖

在表单中,输入框的输入一般伴随着接口请求,为了避免服务端压力过大,可进行防抖处理

在vue中可采用自定义指令的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/***
     * 防抖 单位时间只触发最后一次
     * @param {?Number|300} type - 当前元素类型
     *  @param {Function} fn - 执行事件
     *  @param {?String|"click"} event - 事件类型 例:"keydown"
     *  @param {?Number|300} time - 间隔时间
     *  @param {Array} binding.value - [fn,event,time]
     *  例:<el-input v-debounce="[queryList,`keydown`,300]" />
     *  也可简写成:<el-input v-debounce="[queryList]" />
     *  queryList 函数中 可以拿到输入的值,进行接口请求
     *  例:async queryList(Val) { await xxx(val) }
     */
    Vue.directive('debounce', {
      inserted: function (el, binding) {
        let [type = "input", fn, event = "keydown", time = 300] = binding.value
        const targetEl = el.getElementsByTagName(type)[0];
        let timer
        targetEl.addEventListener(event, () => {
          timer && clearTimeout(timer)
          timer = setTimeout(() => fn(targetEl?.value), time)
        })
      }
    });