轮子-按钮防多次点击。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>

还有一些样式，自己写写