项目根目录新建directives文件夹，并创建index.js, 存放项目中的全局指令。

image.png

函数构建

import Vue from 'vue'

/**
 * @desc 防抖函数
 * @param func  函数
 * @param wait 延迟执行毫秒数
 * @param immediate true表示立即执行 false 非立即
 * 
 */
function debounce(func, wait, immediate = true) {
    let timeout
    return function(){
      let context =  this
      let args = arguments
      if(timeout) clearTimeout(timeout)
      if(immediate){
        var callNow = !timeout
        timeout = setTimeout(()=>{
          timeout = null
        },wait)
        if(callNow) func.apply(context,args)
      }else{
        timeout = setTimeout(()=>{
          func.apply(context,args)
        },wait)
      }
    }
   
  }
  
Vue.directive('debounce',{
    bind(el,binding){
        let fun;
        if(binding.value instanceof Array){
            const [func, time=1000] = binding.value
            fun = debounce(func,time)
        }else{
            fun = debounce(binding.value,1000)
        }
        el.addEventListener('click',fun)
    }
})

main.js主入口中引入

image.png

最后使用防抖自定义指令

 <u-button v-debounce="() => { clickFun(item) },1000 "> 按钮 </u-button>
 <u-button v-debounce="[() => { clickFun(item) },1000 ]"> 按钮 </u-button>
 <u-button v-debounce="[ $event => { clickFun($event,item) } ,500]"> 按钮 </u-button>

其中参数1000 和 500 可选，默认1000毫秒