1.创建 common.js 文件
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
export function debounce(func, wait, immediate = true) {
let timeout
return function () {
if (timeout) clearTimeout(timeout)
if (immediate) {
var callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) func.apply(this, arguments)
} else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait)
}
}
}
2.创建 directives.js文件
import Vue from 'vue'
import { debounce } from '@/plugins/common'
//防抖自定义指令
Vue.directive('debounce',{
bind(el,binding){
let executeFunction;
if(binding.value instanceof Array){//传参
executeFunction = debounce(func,time)
}else{//不传参
executeFunction = debounce(binding.value,1000)
}
el.addEventListener('click',executeFunction);
}
})
3.main.js 引入 import '@/directives'
4. 使用 v-debounce='click函数不可以带括号 会自动触发函数'vue防抖制定
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等，想来大家都很熟悉了，本篇介绍一种使用 Types...
- 在vue中使用防抖，第一种有效，第二种无效。这两种方法有什么区别吗？ 第一种意思是把防抖器赋值给这个函数，执行这个...
