Vue 实现倒计时按钮功能

data() {
  return {
    isAvailable: true,
    totalTime: 2,  // 倒计时时间
    btnContent: '下一步',
    btnDefault: '下一步',
    clock: null,
  };
},
countDown() {
  if (!this.isAvailable) return;
  this.isAvailable = true;
  this.btnContent = `${this.btnDefault}(${this.totalTime})`;
  window.clearInterval(this.clock);
  this.clock = window.setInterval(() => {
    this.totalTime --;
    this.btnContent = `${this.btnDefault}(${this.totalTime})`;
    if (this.totalTime < 1) {
      window.clearInterval(this.clock);
      this.btnContent = this.btnDefault;
      this.isAvailable = false;
    }
  }, 1000);
},
 

猜你喜欢

转载自blog.csdn.net/GrootBaby/article/details/114519312