标签：console 倒计时 btnText 按钮 timerInterval maxtime null

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。