Vue 前端框架中限制用戶短時間內多次點擊同一按鈕的方法（例如：登錄、注冊）

一、首先在項目目錄（自定義）下創建'controlClickState.js'文件，后在文件中定義如下內容：

// controlClickState.js 文件

export default {
  install(Vue) {
    // 禁止短時間內重復點擊
    Vue.directive('preventClick', {
      inserted(button, bind) {
        button.addEventListener('click', () => {
          if (!button.disabled) {
            button.disabled = true;
            setTimeout(() => {
              but.disabled = false
            }, 6000)
          }
        })
      }
    })
  }
}

二、在項目目錄下的 main.js 入口文件引用定義好的 'controlClickState.js'文件

import preventClick from '../static/js/controlClickState'
Vue.use(preventClick)

三、在需要限制點擊頻率的組件中使用

<button v-preventClick>登錄</button>