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

发布时间：2023-05-20

一、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，此时组件又会变为自动计时的状态。

推荐文章