按钮倒计时

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

<script>
export default {
  name: "inside3",
  data(){
    return{
      //按钮倒计时用
      timerInterval: null,
      btnText: '倒计时点击'
    }
  },
  methods: {
    btnClick(){

      if (this.timerInterval != null) return;

      this.IntervalShowButton();

console.log('倒计时完成')
    },
    //倒计时
    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);
    },

  }
}
</script>

<style scoped>

</style>

标签：console,倒计时,btnText,按钮,timerInterval,maxtime,null
来源： https://www.cnblogs.com/linhan8888/p/16390388.html