vue防重复点击(指令实现)

防重复点击或提交，在项目中是必不可少，如果封装成一个组件，但是点击的按钮的样式千差万别，有<button>和<a>有<div>各种实现，很难做到通用，然后就想到了用指令去实现。
直接上代码：
1、定义一个指令

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

html

<a class="btn" href="javascript:;" v-preventReClick="3000" @click.prevent="pay($event)">立即投保</a>

javascript

pay (event) {        if (event.target.disabled) {          // 点击太频繁了
          return
        }
  ...
}

作者：竿牍
链接：https://www.jianshu.com/p/c13800c9a09e