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

作者: 竿牍 | 来源:发表于2018-08-28 10:53 被阅读15次

防重复点击或提交,在项目中是必不可少,如果封装成一个组件,但是点击的按钮的样式千差万别,有<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
        }
  ...
}

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

相关文章

网友评论

  • 秋无衣:不错的做法. 但有些按钮是需要连续点击的, 此时能否点击依赖一次网络请求是否完成, 我还是做了封装组件, 通过传入:class=“cls”来选择样式, 传入fetching来控制是否能emit.

本文标题:vue防重复点击(指令实现)

本文链接:https://www.haomeiwen.com/subject/kydfwftx.html