vue 获取验证码倒计时组件

版权声明：转载请评论留言 https://blog.csdn.net/solocao/article/details/85244701

之前写过一个计时函数，有计算误差，但是验证码的60秒倒计时可以忽略这一点点误差。直接上代码。

<template>
  <div class="captcha-row">
    <input class="captcha-input" placeholder="输入验证码" auto-focus />
    <div v-if="showtime===null" class="captcha-button" @click="send">
      获取验证码
    </div>
    <div v-else class="captcha-button">
      {{showtime}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 计时器,注意需要进行销毁
      timeCounter: null,
      // null 则显示按钮 秒数则显示读秒
      showtime: null
    }
  },
  methods: {
    // 倒计时显示处理
    countDownText(s) {
      this.showtime = `${s}s后重新获取`
    },
    // 倒计时 60秒 不需要很精准
    countDown(times) {
      const self = this;
      // 时间间隔 1秒
      const interval = 1000;
      let count = 0;
      self.timeCounter = setTimeout(countDownStart, interval);
      function countDownStart() {
        if (self.timeCounter == null) {
          return false;
        }
        count++
        self.countDownText(times - count + 1);
        if (count > times) {
          clearTimeout(self.timeCounter)
          self.showtime = null;
        } else {
          self.timeCounter = setTimeout(countDownStart, interval)
        }
      }
    },
    send() {
      this.countDown(60);
    }
  },
}
</script>

<style lang="less" scoped>
.captcha-row {
  display: flex;
  .captcha-button {
    background: #048fff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rpx 8rpx;
    width: 320rpx;
    border-radius: 4rpx;
  }
}
</style>