vue3 防止重复提交 自定义指令

该指令使用于按钮标签，也适应与非按钮标签

一、定义

preventReClick.ts

import type { DirectiveBinding } from 'vue'

export default (app: { directive: 
  (arg0: string, arg1: { mounted(el: HTMLElement, binding: DirectiveBinding<any>): void }) => void }) => {
  app.directive('preventReClick', {
    mounted(el:HTMLElement, binding:DirectiveBinding) {
      el.addEventListener('click', () => {
        if (el.style['pointer-events'] != 'none') {
          el.style['pointer-events'] = 'none'
          setTimeout(() => {
            el.style['pointer-events'] = 'all'
          }, binding.value || 1500)
        }
      })
    },
  })
}

二、在main.js引入

main.ts
import preventReClick from '@/utils/directives/preventReClick'

三、使用

aa.vue使用
<div
      v-preventReClick
      class="submit shadow-btn"
      @click="submitForm(ruleFormRef)"
    >
      提交
    </div>