vue2.x防重指令

文章参考

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

问题描述

1. 在web页面跟后台交互时候，当页面响应不及时，用户会频繁点击，导致请求重复提交
2. 想找一个通用解决办法解决这种防重的问题
3. 按钮千差万别，有<button> 和<a>有<div>各种实现

解决办法

原理说明

利用水印的原理，css的pointer-events属性来解决连续点击的问题

Vue 指令实现

1. 定义指令

Vue.directive("preventReClick", {
  inserted(el, binding) {
    el.addEventListener("click", () => {
      if (el.style.pointerEvents !== "none") {
        el.style.pointerEvents = "none"
        setTimeout(() => {
          el.style.pointerEvents = ""
        }, 2000)
      }
    })
  }
})

2. vue 使用指令

<template>
  <div>
    <div>
      <button v-preventReClick @click="repeatClick" style='color:red'>防重处理</button>
      <a v-preventReClick @click="repeatClick" style='color:red'>防重处理</a>
      <span v-preventReClick @click="repeatClick" style='color:red'>防重处理</span>
    </div>
  </div>
</template>

<script>

export default {
  mounted: function() {
    console.log(this);
  },
  methods: {
    repeatClick () {
      console.log('repeatClick')
    }
  }
};
</script>