vue中按钮防止暴力点击，多次提交数据的问题，组件通用化封装

方法1：用计时器改变按钮可点击状态

<template>
  <div class="test">
    <button @click="btnClick">button</button>
  </div>
</template>
 
 
<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        is_click: false
      }
    },
    methods:{
      btnClick(){
        if(this.is_click){
          return false;
        }
        console.log('我是要执行的部分 每次点击执行一次');
        this.is_click=true;
        setTimeout(()=>{
          this.is_click=false;
 
        },2000)
 
      }
    }
  }
</script>

方法2，通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false，按钮可以点击。 当我们点击这个按钮的时候，首先将按钮的绑定isDisable设置为true，1秒后立马将其置为false。 所以用户只能有一秒的时间去操作这个按钮。

<template>
  <button @click="submit()" :disabled="isDisable">点击</button>
</template>
 
<script>
  export default {
    name: 'TestButton',
    data: function () {
      return {
        isDisable: false
      }
    },
    methods: {
      submit() {
        this.isDisable = true
        setTimeout(() => {
          this.isDisable = false
        }, 1000)
      }
    },
  }
</script>

 
但是如果很多页面都有这种问题就很难操作，所以我们可以自定义组件

<template>
  <div class="clickAgain">
    <div @click="btnClick">
      <slot></slot>
 
    </div>
  </div>
 
</template>
 
<script>
  export default {
    name: "clickAgain",
    data() {
      return {}
    },
    methods: {
      btnClick() {
        if (this.is_click) {
          return false;
        }
        this.$emit("btnClick");
        this.is_click = true;
        setTimeout(() => {
          this.is_click = false;
 
        }, 2000)
 
      }
    }
  }
</script>

防止暴力点击组件

<template>
  <div class="clickAgain">
    <div @click="btnClick">
      <slot></slot>
 
    </div>
  </div>
 
</template>
 
<script>
  export default {
    name: "clickAgain",
    data() {
      return {}
    },
    methods: {
      btnClick() {
        if (this.is_click) {
          return false;
        }
        this.$emit("btnClick");
        this.is_click = true;
        setTimeout(() => {
          this.is_click = false;
 
        }, 2000)
 
      }
    }
  }
</script>

3 通过自定义指令

1）新建plugins.js

export default {
  install (Vue) {
    // 防重复点击(指令实现)
    Vue.directive('preventReClick', {
      inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            }, binding.value || 3000)
          }
        })
      }
    })
  }
}

2）在main.js引用

3）按钮调用直接加v-preventReClick

<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-preventReClick></el-button>

这样就不需要每次使用都引入对应组件只用改变点击事件的调用方法即可