utils/debounce.js
javascript
复制代码
/**
* 防抖函数
* @param {*} fn 函数
* @param {*} delay 暂停时间
* @returns
*/
export function debounce(fn, delay = 500) {
let timer = null
return function (...args) {
// console.log(arguments);
// const args = Array.from(arguments)
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
main.js 定义全局化指令
javascript
复制代码
import { createApp } from 'vue'
import App from './App.vue'
import { debounce } from './utils/debounce'
const app = createApp(App)
// 创建全局指令
app.directive('debounce', {
mounted(el, binding) {
const { value, arg } = binding
const debouncedFn = debounce(value, arg)
el.addEventListener('click', debouncedFn) // 将事件改为click
},
beforeUnmount(el, binding) {
const { value } = binding
el.removeEventListener('click', value)
}
})
app.mount('#app')
指令的使用
复制代码
<template>
<button v-debounce="handleInput" :delay="500">无参</button>
<button v-debounce="() => handleInput2(1, 2)" :delay="500">传参</button>
</template>
<script>
export default{
methods: {
handleInput(){
console.log('防抖指令的使用');
},
handleInput2(v1, v2){
console.log('接收参数', v1,v2);
},
}
}
</script>