vue自定义指令

• 先在directive/preReClick.ts文件写一个防重复点击的自定义指令

import { App } from 'vue'

export function preReClick(app: App) {
  app.directive('preReClick', {
    mounted(el) {
      el.addEventListener('click', () => {
        if (!el?.disabled) {
          el.disabled = true
          setTimeout(() => {
            el.disabled = false
          }, 2000)
        }
      })
    }
  })
}

• 在directive/index.ts

import { App } from 'vue'
import { preReClick } from './permission'

export function globDirectives(app: App) {
//自定义指令统一写在这个函数内，再到mian.ts注册即可
  preReClick(app) 
}

在main.ts注册自定义指令

import { globDirectives } from '@/directive/index'

const app = createApp(App)
globDirectives(app)

• 在页面调用

<button v-preReClick>自定义指令</button>