vue3自定义指令以及实现防抖指令

一、定义防抖函数

export const debounceFn = <T>(fn: (...args: any[]) => T, limit = 300) => {
  let timer: number | null = null
  let result: T | null = null
  return (...args: any[]) => {
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
    timer = window.setTimeout(() => {
      result = fn(...args)
    }, limit)
    return result
  }
}

二、自定义防抖指令

export const debounce: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding
    if (
      !value ||
      typeof binding.value.fn !== 'function' ||
      !binding.value.event
    )
      return
    el.addEventListener(binding.value.event, debounceFn(binding.value.fn))
  },
  beforeUnmount(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding
    if (
      !value ||
      typeof binding.value.fn !== 'function' ||
      !binding.value.event
    )
      return
    el.removeEventListener(binding.value.event, debounceFn(binding.value.fn))
  }
}

三、注册全部自定义指令

import * as directives from './directives'
import { App, Directive } from 'vue'
const useDirectives = (app: App): void => {
  Object.keys(directives).forEach((key) => {
    app.directive(key, (directives as { [key: string]: Directive })[key])
  })
}
export default useDirectives

在main.js中

const app = createApp(App)
useDirectives(app)

四、使用方式

 <el-button type="primary" v-debounce="{ event: 'click', fn: confirm }"
        >确定</el-button
      >