36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
/**
|
|
* 防抖：在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效。
|
|
* 使用：
|
|
* <el-button v-debounce:click.delay[2000]="testDebounce">按钮防抖</el-button>
|
|
* <el-button v-debounce:click.delay[2000]="()=>testDebounce('debounce')">按钮防抖传参</el-button>
|
|
*/
|
|
import { ObjectDirective } from 'vue'
|
|
interface DebounceEl extends HTMLElement {
|
|
debounceEvent: () => void
|
|
}
|
|
// 防抖指令封装
|
|
const debounceDirective: ObjectDirective = {
|
|
beforeMount(el: DebounceEl, binding: any) {
|
|
let timer: number
|
|
let delay: number = 1000
|
|
const keys = Object.keys(binding.modifiers)
|
|
if (keys) {
|
|
const key: string | undefined = keys.find((key) => key.includes('delay'))?.toString()
|
|
const value = (key ?? '').match(/(?<=\[).*?(?=\])/)
|
|
if (value) delay = parseInt(value[0])
|
|
}
|
|
el.debounceEvent = () => {
|
|
clearTimeout(timer)
|
|
timer = window.setTimeout(() => {
|
|
binding.value()
|
|
}, delay)
|
|
}
|
|
el.addEventListener(binding.arg, el.debounceEvent)
|
|
},
|
|
beforeUnmount(el: DebounceEl, binding: any) {
|
|
el.removeEventListener(binding.arg, el.debounceEvent)
|
|
},
|
|
}
|
|
|
|
export default debounceDirective
|