vue3自定义指令封装

1.创建一个文件夹 里面创建permission、debounce、throttle.ts文件

1.1 permission 按钮权限指令

import type { Directive, DirectiveBinding } from "vue";
# 这是获取的按钮权限
let useRoutesStore = ["1001", "1002", "1003", "1004", "1005", "1006", "1007"];
const permission: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding): void {
    const { value } = binding;
    console.log(binding);
    if (!value) return;
    const allBtnMap = useRoutesStore;
    // 可根据自己的业务修改此处实现逻辑
    if (!allBtnMap.includes(value)) el.style.display = "none";
    else el.style.display = "auto";
  },
};

export default permission;

1.2 debounce 防抖函数

函数防抖是常见的项目交互优化方式，就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

import type { Directive, DirectiveBinding } from 'vue'
interface ElType extends HTMLElement {
  __handleClick__: () => any
}
const debounce: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    if (typeof binding.value !== 'function')
      return
 
    let timer: NodeJS.Timeout | null = null
    el.__handleClick__ = function () {
      if (timer)
        clearInterval(timer)
 
      timer = setTimeout(() => {
        binding.value()
      }, 500)
    }
    el.addEventListener('click', el.__handleClick__)
  },
  beforeUnmount(el: ElType) {
    el.removeEventListener('click', el.__handleClick__)
  },
}
export default debounce

1.3 throttle 节流函数  

与上面防抖函数一样，节流也是常见的项目交互优化方式，主要是指在事件被触发后，在规定时间内无论再怎么触发只会调用一次函数，直到时间结束。

import type { Directive, DirectiveBinding } from 'vue'
interface ElType extends HTMLElement {
  __handleClick__: (event: MouseEvent) => any
  disabled: boolean
}
const throttle: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    if (typeof binding.value !== 'function')
      return
    const duration = binding.arg ? parseInt(binding.arg) : 1000
    let timer: NodeJS.Timeout | null = null
    el.__handleClick__ = function (event: MouseEvent) {
      if (timer)
        clearTimeout(timer)
      if (!el.disabled) {
        el.disabled = true
        el.classList.add('n-button--disabled')
        binding.value(event)
        timer = setTimeout(() => {
          el.disabled = false
          el.classList.remove('n-button--disabled')
        }, duration)
      }
    }
    el.addEventListener('click', el.__handleClick__)
  },
  beforeUnmount(el: ElType) {
    el.removeEventListener('click', el.__handleClick__)
  },
}
export default throttle

2. 注册自定义指令

2.1 创建一个ts文件 导入全部自定义指令

import type { App } from 'vue'
import debounce from './debounce'
import throttle from './throttle'
import permission from './permission'
 
const List: any = {
  debounce,
  throttle,
  permission,
}
 
const setDirectives = {
  install(app: App<Element>) {
    Object.keys(List).forEach((key) => {
      app.directive(key, List[key])
    })
  },
}
 
export default setDirectives

2.2  main.ts 导入

import { createApp } from "vue";
import App from "./App.vue";
import "@/assets/style/style.css";
const app = createApp(App);


import setDirectives from "@/shared/directives/index";
// 按钮权限指令挂载
app.use(setDirectives);
app.mount("#app");

3. 使用自定义指令

3.1 按钮权限自定义指令使用

# 这样就可以了
<div v-permission="'1001'">
    我是一个按钮
</div>

3.2 防抖指令使用 

# 绑定的是一个函数
<div v-debounce="handle">
    我是一个按钮
</div>

3.3 节流指令使用

# 绑定的是一个函数
<div v-throttle:2000="handle">
    我是一个按钮
</div>