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
        }
  ...
}

大家还有没有优化建议哈,请不吝赐教!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。