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="width: 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>

這樣就不需要每次使用都引入對應組件只用改變點擊事件的調用方法即可 可注冊全拒絕自定義組件