vue 引入自定義js組件並全局注冊自定義指令, 防多次點擊，重復提交

1 新建 preventReClick.js

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000)
      }
    })
  }
});

export { preventReClick }

2,在main.js中引用

import '@/components/directive/preventReClick.js' // 防多次點擊，重復提交指令，路徑改為自己的，這里不加from ,不用use

3 在頁面上使用

 <a-button @click="endStepHandle" v-preventReClick>結束</a-button>

默認是3秒，如果想要自己傳時間，直接寫時間就好了

// 傳了個2秒
<a-button @click="endStepHandle" v-preventReClick="2000">結束</a-button>