Vue获取验证码倒计时60秒按钮详解

一、Vue验证码倒计时刷新

验证码是应用程序中常用的功能，倒计时60秒的按钮是验证码常见的实现方式。在Vue中，可以使用定时器来实现倒计时刷新。

首先，在Vue组件中声明一个变量代表剩余时间，该变量的初始值为60（表示60秒）。另外，还需要声明一个计时器，用于每隔一秒更新剩余时间，直到剩余时间为0。在计时器中，每一秒将剩余时间减1，同时更新显示在页面上的倒计时。

  <template>
    <button @click="refreshCode()" :disabled="disabled">{{ textBtn }}</button>
  </template>

  <script>
    export default {
      data() {
        return {
          remainingTime: 60,
          timer: null
        }
      },
      computed: {
        disabled() {
          return this.remainingTime !== 60;
        },
        textBtn() {
          return this.disabled ? `${this.remainingTime}秒后可重新发送` : '获取验证码';
        }
      },
      methods: {
        refreshCode() {
          this.remainingTime = 60;
          this.timer = setInterval(() => {
            this.remainingTime--;
            if (this.remainingTime === 0) clearInterval(this.timer);
          }, 1000);
        }
      },
      destroyed() {
        clearInterval(this.timer);
      }
    }
  </script>

在代码中，使用disabled来控制按钮是否可用。当剩余时间不为60秒时，按钮将变为灰色且无法点击，表示还需要等待一段时间才能重新发送验证码。同时，在计时器结束后需要清除计时器，否则计时器将一直运行下去。

二、Vue发送验证码倒计时

发送验证码倒计时与验证码倒计时刷新的实现方式较为相似，不同之处在于发送验证码需要调用后端API，而刷新验证码则是直接在前端更新剩余时间。

首先，在发送验证码的函数中，需要调用后端API并等待返回结果。当接收到成功的响应后，才开始启动倒计时计时器。与刷新验证码不同的是，在启动计时器之前，要将发送按钮禁用掉。另外，在计时器结束后，也要将按钮重新启用。

  <template>
    <button @click="sendCode()" :disabled="disabled">{{ textBtn }}</button>
  </template>

  <script>
    export default {
      data() {
        return {
          remainingTime: 60,
          timer: null,
          disabled: false
        }
      },
      computed: {
        textBtn() {
          return this.disabled ? `${this.remainingTime}秒后重新获取` : '获取验证码';
        }
      },
      methods: {
        async sendCode() {
          if (this.disabled) return;
          this.disabled = true;
          try {
            // 调用后端API发送验证码
            // 等待成功响应
            this.timer = setInterval(() => {
              this.remainingTime--;
              if (this.remainingTime === 0) {
                clearInterval(this.timer);
                this.disabled = false;
              }
            }, 1000);
          } catch (error) {
            // 出错处理
            this.disabled = false;
          }
        }
      },
      destroyed() {
        clearInterval(this.timer);
      }
    }
  </script>

三、Vue短信验证码倒计时

短信验证码是应用程序中常用的验证码类型之一。与获取验证码不同的是，短信验证码是通过手机平台发送而非后端API。同样，短信验证码倒计时也需要在发送成功后启动计时器。

前端代码如下：

  <template>
    <button @click="sendCode()" :disabled="disabled">{{ textBtn }}</button>
  </template>

  <script>
    export default {
      data() {
        return {
          remainingTime: 60,
          timer: null,
          disabled: false
        }
      },
      computed: {
        textBtn() {
          return this.disabled ? `${this.remainingTime}秒后重新获取` : '获取短信验证码';
        }
      },
      methods: {
        async sendCode() {
          if (this.disabled) return;
          this.disabled = true;
          try {
            // 调用手机平台API发送短信验证码
            // 等待发送成功
            this.timer = setInterval(() => {
              this.remainingTime--;
              if (this.remainingTime === 0) {
                clearInterval(this.timer);
                this.disabled = false;
              }
            }, 1000);
          } catch (error) {
            // 出错处理
            this.disabled = false;
          }
        }
      },
      destroyed() {
        clearInterval(this.timer);
      }
    }
  </script>

四、Vue实现验证码倒计时

实现验证码倒计时需要考虑到倒计时的场景和需要调用的API或函数。倒计时可以出现在多个地方，例如通过短信验证码登录、发送系统消息、重设密码等。因此，在实现验证码倒计时时应该尽量通用，方便在各种场景中复用。

首先，在Vue组件中声明一个计时器timer和一个剩余时间remainingTime。计时器用于定时更新剩余时间，剩余时间初始值为60。同时，还需要声明一个参数controlled，用于判断倒计时是否被控制。

在计时器中，每秒减1，直到为0。如果倒计时被控制，可以通过触发自定义事件来控制倒计时。在每次更新剩余时间时，判断剩余时间是否为0，如果为0则停止计时器。

  <template>
    <button @click="refreshCode()" :disabled="disabled">{{ remainingTime }}</button>
  </template>

  <script>
    export default {
      props: {
        controlled: {
          type: Boolean,
          default: false
        }
      },
      data() {
        return {
          remainingTime: 60,
          timer: null,
          disabled: true
        }
      },
      watch: {
        controlled(newVal) {
          if (newVal) clearInterval(this.timer);
          this.disabled = !newVal;
          this.remainingTime = 60;
        }
      },
      mounted() {
        if (!this.controlled) {
          this.timer = setInterval(() => {
            this.remainingTime--;
            if (this.remainingTime === 0) clearInterval(this.timer);
          }, 1000);
        }
      },
      methods: {
        refreshCode() {
          if (!this.controlled) return;
          this.$emit('refresh');
          clearInterval(this.timer);
          this.disabled = true;
          this.remainingTime = 60;
        }
      }
    }
  </script>

使用时，可以将controlled设置为true，并在父组件中监听组件的refresh事件即可控制倒计时的开始和结束。代码如下：

  <template>
    <div>
      <my-countdown :controlled="controlled" @refresh="resetCountdown" />
      <button @click="startCountdown">开始倒计时</button>
    </div>
  </template>

  <script>
    import MyCountdown from './MyCountdown.vue';

    export default {
      components: {
        MyCountdown
      },
      data() {
        return {
          controlled: false
        }
      },
      methods: {
        startCountdown() {
          this.controlled = true;
          setTimeout(() => {
            this.controlled = false;
          }, 5000);
        },
        resetCountdown() {
          this.controlled = false;
        }
      }
    }
  </script>

在上面的代码中，通过点击“开始倒计时”按钮来控制倒计时的开始和结束。当按钮被点击时，将controlled设置为true，此时倒计时组件将不会自动开始计时器，直到监听到了refresh事件，才会开始计数。5秒后我们又将controlled设置为false，此时组件又会变为自动计时的状态。