按鈕防多次點擊。Vue封裝一個button組件

項目全局都有button，爲了統一風格，方便使用，封個組件。此外還有好多組件要瘋的。。。。

基本的 綁定點擊事件 還有一些狀態判定

<template>
  <div class="button">
    <button :disabled="clickState" 
            @click="onclick" 
            class="butt" 
            :class="{'butts' : !state}"
    >{{title}}</button>
  </div>
</template>

一些方法

<script>
  export default {
    name: 'Butt',
    props: {
      clickState: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        required: true
      },
      state: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        buttonStatus: true,
        stopTime: null
      }
    },
    methods: {
      onclick() {
        if (this.buttonStatus) {
          this.buttonStatus = false;
          this.$emit('onclick')
        }
        this.setButton();
      },
      setButton() { //添加一個定時器，點擊之後延時1.5s，防二次點擊後臺報錯
        clearTimeout(this.stopTime);
        this.stopTime = setTimeout(() => {
          this.buttonStatus = true
        }, 1500)
      }
    }
  };
</script>

還有一些樣式，自己寫寫