vue防按钮频繁点击(自定义指令)

频繁点击就会频繁触发请求，为了避免这种情况，可以自定义指令来实现

在main.js中写以下代码

// 复制粘贴在main.js里
// 自定义指令：解决element-ui按钮重复点击
Vue.directive('preventReClick', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 2000)
           //binding.value可以自行设置。如果设置了则跟着设置的时间走
         //例如：v-preventReClick='500'
      }
    })
  }
})

在需要触发的按钮写上 v-preventReClick 即可

原理是在点击的时候，给自身加一个disabled禁止点击, 两秒后disabled取消，
但是这个指令方法，在div上面没有生效， 所以需要用button按钮