vue封装防抖全局自定义指令

创建工具debounce.js：

// src/directives/debounce.js
export default {
    inserted: function (el, binding) {
      // 防抖函数
      function debounce(func, wait, immediate) {
        var timeout;
        return function () {
          var context = this, args = arguments;
          var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
          };
          var callNow = immediate && !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
        };
      };
      if (binding.value !== binding.oldValue) {
        // 方法和延迟时间
        var debounceEventHandler = debounce(binding.value, 300);
        el.addEventListener('click', debounceEventHandler);
      }
    },
  }

 main.js全局引入注册：

import debounceDirective from './utils/debounce'
// 注册自定义指令
Vue.directive('debounce', debounceDirective)

vue文件中使用：（注意函数要是箭头函数包裹的形式，否则报错）

 <Button v-else type="primary" v-debounce="() => handleSubmit(false)" :loading="saveLoading">保存</Button>