vue2自定义指令防抖
2023-08-01 本文已影响0人
Allen6879
项目根目录新建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毫秒