【轉】前端vue中防止用戶在短期內頻繁屢次點擊按鈕

來源：https://www.jianshu.com/p/fa283869df95

介紹兩種vue項目中防止用戶在必定時間內頻繁點擊按鈕觸發事件的方法

第一種方法：在規定時間內將按鈕禁用的方法

主要思想就是禁止用戶在必定的時間屢次點擊，在必定時間內將按鈕禁用，用定時器實現，必定時間以後用戶可再次點擊

第二種方法：用指令的方式實現，全局註冊，方便

1. 新建js文件(由於是全局可用的，文件能夠叫preventRepeatClick.js，我這裏是叫index.js)

代碼以下：

export default {
  install (Vue) {
    // 防止重複點擊
    Vue.directive('preventReClick', {
      inserted (el, binding) {
        console.log("binding-7",binding)
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            },binding.value || 1000)
          }
        })
      }
    })
  }
}

1. 在main.js中引入上面的js文件
2. 在觸發點擊事件的按鈕上直接用指令便可
3. 五秒以後 按鈕下面的事件纔可再次觸發