export default {
    mounted(el: any, binding: any) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 3000)
            }
        })
    }
}

import type { App } from 'vue';
import reClick from './reClick';
//引入其他指令
/**
 * 導(dǎo)出指令方法：v-xxx
 * @methods reClick 防止重復(fù)點(diǎn)擊，用法：v-reClick
 */
export function directive(app: App) {
	//連續(xù)點(diǎn)擊指令 v-reClick默認(rèn)3秒不能聯(lián)系點(diǎn)擊 v-reClick="1000"
	app.directive('reClick', reClick);
}

import App from './App.vue';
import {directive} from '@/directive/index.ts'; //引入自定義指令
const app = createApp(App);
directive(app); //全局引入

<!-- v-reClick 默認(rèn)3秒內(nèi)反正重復(fù)點(diǎn)擊 -->
<el-button v-reClick type="primary" :disabled="loading">確定</el-button>
<!-- v-reClick="1000" 默認(rèn)1秒內(nèi)反正重復(fù)點(diǎn)擊 -->
<el-button v-reClick="1000" type="primary" :disabled="loading">確定</el-button>

  // 利用定時器：1秒之后才能再次點(diǎn)擊
  app.directive('preventReClick', {
    mounted: (el, binding) => {
      el.addEventListener('click', () => {
        if (!el.disabled) {
          el.disabled = true
          setTimeout(() => {
            el.disabled = false
          }, binding.value || 1000)
        }
      })
    }
  })

  //自定義指令版本2：根據(jù)請求結(jié)果防止按鈕重復(fù)提交請求
  //使用方式如下：
  //1、請求函數(shù)不需要傳參，直接傳函數(shù)名或者包含函數(shù)名的對象，比如v-prevent-dup-click="submit"或者{fn:submit}
  //2、請求函數(shù)需要傳參，傳遞一個對象，包含函數(shù)名和參數(shù)，比如{fn:submit,params:[1,2,3]}
import type { App, Directive, DirectiveBinding } from 'vue'
 interface ReturnPromiseFn {
  (...args: any[]): Promise<any>
 }
 interface objectType {
  fn: ReturnPromiseFn
   params?: any[]
 }
app.directive('preventDupClick', directiveBindingDirective)
 const directiveBindingDirective: Directive = {
    mounted(el, binding: DirectiveBinding<ReturnPromiseFn & objectType>) {
      if (!binding.value) {
        throw new Error('v-prevent-dup-click must pass a parameter')
      }
      if (typeof binding.value !== 'function' && typeof binding.value !== 'object') {
        throw new Error('v-prevent-dup-click requires a function or an object with a function `fn`')
      }
      // 一開始是未點(diǎn)擊狀態(tài)
      el.isClicked = false
      const handerClick = function (event) {
        // 如果已經(jīng)點(diǎn)擊過，則阻止事件
        if (el.isClicked === 'true') {
          event.preventDefault()
          event.stopPropagation()
          return
        }
        // 標(biāo)記為已點(diǎn)擊
        el.isClicked = 'true'
        // 調(diào)用傳入的函數(shù)
        let fn: ReturnPromiseFn
        let params: any[] = []
        //如果只傳函數(shù)名
        if (typeof binding.value == 'function') {
          fn = binding.value
        } else {
          //如果傳對象{fn:submit,params:[1,2,3]}或者{fn:submit}
          fn = (binding.value as objectType).fn
          params = (binding.value as objectType)?.params ?? []
        }
        console.log(params, 'params')
        try {
          fn(...params).finally(() => {
            el.isClicked = false
          })
        } catch (error) {
          throw new Error('binding.value或 binding.value.fn必須是返回Promise類型的函數(shù)')
        }
      }
      el.hander = handerClick
      el.addEventListener('click', handerClick)
    },
    //銷毀事件
    beforeUnmount(el) {
      if (el.hander) {
        el.removeEventListener('click', el.hander)
      }
    }
  }