前言

在做项目时难免会碰到需要防抖节流的时候，这时候在vue文件中写防抖节流相关逻辑就不太好了，他本应该是纯粹的业务代码，但是却被塞入了防抖节流的逻辑，以后将很难维护。

这时候可以考虑封装一个全局指令这样使用起来也会方便不少

1.新建throttleDirective.js文件

let fn = null;//使用节流函数包装后的触发函数
let method = null;需要触发的函数
let wait = 1000;//延迟时间
let event = 'click';//触发方式
export default {
  install(Vue) {
    Vue.directive('throttle', {
      inserted(el, binding) {
        method = binding.value; //将传过来的回调放入method中
        if (Array.isArray(binding.value)) { 
        //如果传过来的数据是数组的话就结构赋值延迟时间及出发方式
          [method, wait = 1000, event = 'click'] = binding.value;
        }
        //使用lodash中的节流函数包装传递过来的事件
        fn = _throttle(method, wait, {
          leading: true,
          trailing: false
        });
        给当前元素绑定经过节流函数包装过的事件
        el.addEventListener(event, fn);
      },
      unbind(el) {
          //解绑事件
        fn && el.removeEventListener(event, fn);
      }
    });
  }
};

2.挂载throttleDirective指令

import Vue from 'vue';
Vue.use(throttleDirective)

3.使用

//不传递参数
<el-button v-throttle="reset">刷新</el-button>
//传递参数
<el-button v-throttle="()=>reset(false)">刷新</el-button>
//自定义触发方式及延时时长
<el-button v-throttle="[reset,300,`click`]">刷新</el-button>

总结

以上是节流函数封装为全局指令的方法防抖函数也是类似的，就不一一赘述了～，如果想自己实现节流逻辑也可以自己手写～注：本人菜鸡欢迎大佬指正我的问题！

vue项目中使用全局指令封装防抖节流事件

前言

总结