31、vue 倒计时

77 阅读1分钟
<button class="button" @click="countDown">{{content}}</button>

content: '发送验证码',
totalTime: 10,
canClick: true //添加canClick

countDown() {
      if (!this.canClick) return  //改动的是这两行代码
      this.canClick = false
      this.content = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.content = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.content = '重新发送验证码'
          this.totalTime = 10
          this.canClick = true  //这里重新开启
        }
      }, 1000)
    },