Vue全局注册防抖函数自定义指令

Vue全局注册防抖函数自定义指令

1.src下utils文件夹下新建debounce.js

export default (vue) => {
  /**
   * 绑定方法
   * @author CuiYunfei
   * @param {Object} el - The element the directive is bound to.
   * @param {Object} binding - An vue directive object
   */
   vue.directive('debounce', { //防抖函数指令
      inserted: function(el, binding) {
        let timer;
        el.addEventListener("click", () => {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
          //关键点:vue 的自定义指令传递的参数binding 如果是一个函数,则通过      binding.value()来执行,通过上述示例,还可以传递比如事件, 绑定对象之类的
            binding.value();
          }, 1000);
        });
      }
   })
}

main.js引入并注册自定义指令

// 引入debounce函数
import debounce from './assets/utils/debounce'
//注册
debounce(Vue);

使用debounce函数

<el-button type="primary" v-debounce="debounce()">触发防抖函数</el-button>

async debounce(){
  console.log('输出防抖函数');
  // 使用防抖可减轻服务器压力
  let res = await userFormAdd()
 },