让前端飞前端Vue专辑Vue.js学习

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

2018-08-28  本文已影响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
        }
  ...
}

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

上一篇下一篇

猜你喜欢

热点阅读