vue 项目自定义指令实现防抖

自定义v-debounce指令实现click事件防抖

该指令绑定的方法暂不支持传递参数，如需要传参数可以参考另一篇博客，防抖组件的实现
工具uitls文件夹创建debounce.js文件
代码如下

import Vue from 'vue'

Vue.directive('debounce', {
  inserted: function (el, binding) {
    let timer;
    el.addEventListener("click", () => {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        // 关键点：vue的自定义指令传递的参数binding如果是一个函数，则通过binding.value()来执行
        binding.value();
      }, 500)
    })
  }
});

在main.js引入

import "@/utils/debounce.js"

在组件中button按钮添加该指令即可实现防抖，如下：

v-debounce="getMixerTunnelCreatePgm"

参考博客：jianshu.com/p/c4dbbed65ba0