vue 防连点

// 全局注册
// 防止el-button重复点击
Vue.directive('preventReClick', {
  inserted: function (el, binding) {
    el.addEventListener('click', (e) => {
      if (!el.disabled) {
        el.style.pointerEvents = 'none'
        setTimeout(() => {
          el.style.pointerEvents = 'auto'
        }, binding.value || 2000)
      } else {
        // disabled为true时，阻止默认的@click事件
        e.preventDefault()
        e.stopPropagation()
      }
   }, true)
 }
});



// 局部注册
directives: {
    preventReClick: {
      inserted: function (el, binding) {
        el.addEventListener('click', (e) => {
          if (!el.disabled) {
            el.style.pointerEvents = 'none'
            setTimeout(() => {
              el.style.pointerEvents = 'auto'
            }, binding.value || 2000)
          } else {
            // disabled为true时，阻止默认的@click事件
            e.preventDefault()
            e.stopPropagation()
          }
        }, true)
      }
    }
  },


// 基本使用
<div @click="handelClick" v-preventReClick> 防连点</div>
<van-button @click="handelClick" v-preventReClick> 防连点</van-button>