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 自定义组件 将页面中的代码抽离出来 按钮部分用slot 插入

<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 通过自定义指令

<template>
  <div class="login">
    <div class="inp">
     
      <p>
        <Button v-clickAgain="goLogin" style=" 100%" size="large" type="primary"> 登 录</Button>
      </p>
    </div>
  </div>

</template>

<script>
  import request from '../_common/Request.class'
  export default {
    name: "login",
    data() {
      return {
      }
    },
    directives: {
      'clickAgain': {
        // 指令的定义
        bind(el, binding, vnode, oldVnode) {
          // 绑定this
          let self = vnode.context;

          console.log(el, binding, vnode, oldVnode);
          el.onclick = function (e) {
            if (self._is_click) {
              return false;
            }
            /*执行指令绑定的事件*/
            self[binding.expression]()
            self._is_click=true;

            setTimeout(()=>{
              self._is_click=false;
            },2000)

           };
        }
      }
    },
    methods: {
      goLogin() {
        request.loginAction(this.params)
          .then(res => {
            console.log(res)

          })
          .catch(res => {
            this.time = new Date().getTime();
          })


      }
    }
  }
</script>

这样就不需要每次使用都引入对应组件只用改变点击事件的调用方法即可 可注册全拒绝自定义组件