按钮倒计时

<template>
  <div>
    <el-button :disabled="btnDisable" @click="btnClick">{{btnText}}</el-button>
  </div>
</template>

<script>
export default {
  name: "inside3",
  data(){
    return{
      //按钮倒计时用
      timerInterval: null,
      btnText: '倒计时点击',
      btnText1: '倒计时点击',
      btnDisable: false
    }
  },
  methods: {
    btnClick(){
      //原版本
      // if (this.timerInterval != null) return;
      // this.IntervalShowButton();
      // console.log('倒计时完成')

      //改版后
      // this.IntervalButton()
      this.IntervalButton1()
    },
    //倒计时
    IntervalShowButton() {
      var maxtime = 3;
      this.timerInterval = setInterval(() => {
        if (maxtime >= 0) {
          // console.log('maxtime'+maxtime)
          this.btnText = maxtime;
          --maxtime;
        } else {
          clearInterval(this.timerInterval);
          this.timerInterval = null;
          this.btnText = '倒计时结束';

          this.$message({
            message: '恭喜你，这是一条成功消息',
            type: 'success'
          });

          // console.log('clearInterval 时间到,销毁')
        }
      }, 1000);
    },
    IntervalButton() {
      var maxtime = 3;
      // this.btnText = this.btnText1+"("+maxtime+")";

      this.btnDisable = true;
      this.timerInterval = setInterval(() => {
        if (maxtime > 0) {
          // console.log('maxtime'+maxtime)
          this.btnText = this.btnText1+"("+maxtime+")";
          --maxtime;
        } else {
          clearInterval(this.timerInterval);
          this.timerInterval = null;
          this.btnDisable = false;
          this.btnText = this.btnText1

          // console.log('clearInterval 时间到,销毁')
        }
      }, 1000);
    },

    IntervalButton1() {
      var maxtime = 3;
      this.btnText = this.btnText1+"("+(maxtime+1)+")";

      this.btnDisable = true;
      this.timerInterval = setInterval(() => {
        if (maxtime > 0) {
          // console.log('maxtime'+maxtime)
          this.btnText = this.btnText1+"("+maxtime+")";
          --maxtime;
        } else {
          clearInterval(this.timerInterval);
          this.timerInterval = null;
          this.btnDisable = false;
          this.btnText = this.btnText1

          // console.log('clearInterval 时间到,销毁')
        }
      }, 1000);
    }
  }
}
</script>

<style scoped>

</style>