让我们用Vue.js轻松实现验证码发送倒计时

2023-10-11 00:00:45

Vue.js中的验证码发送倒计时实现

随着互联网的迅猛发展，验证码成为了我们生活中不可或缺的一部分。为了增强安全性，验证码被广泛应用于各种场景，比如登录、注册、找回密码等。当用户需要获取验证码时，系统会发送验证码到用户提供的手机号码或邮箱。为了保证验证码的时效性，通常会设置一个倒计时，让用户知道验证码还有多长时间有效。

使用@vueuse/core实现倒计时

实现验证码发送倒计时效果，我们可以使用Vue.js中的@vueuse/core。这是一个轻量级的、可组合的Vue.js实用工具库，它提供了许多开箱即用的功能，其中之一就是useCountdown()。

import { useCountdown } from '@vueuse/core'

export default {
  setup() {
    const { isReady, active, elapsed, restart, pause, resume, reset } = useCountdown(60)

    return {
      isReady,
      active,
      elapsed,
      restart,
      pause,
      resume,
      reset
    }
  }
}

在上述代码中，我们使用useCountdown()创建了一个倒计时实例，并将其命名为countdown。倒计时实例提供了多个属性，包括isReady、active、elapsed、restart、pause、resume和reset。

isReady：表示倒计时是否已准备好。
active：表示倒计时是否正在运行。
elapsed：表示已经过去的时间（以秒为单位）。
restart：重新启动倒计时。
pause：暂停倒计时。
resume：恢复倒计时。
reset：重置倒计时。

在组件中使用倒计时

我们可以在组件中使用倒计时实例来显示验证码发送倒计时。以下是如何在Vue.js组件中使用useCountdown()的示例：

<template>
  <div>
    <button @click="sendCode">发送验证码</button>
    <p v-if="!countdown.isReady">倒计时尚未开始</p>
    <p v-else-if="countdown.active">验证码已发送，还有{{ countdown.elapsed }}秒</p>
    <p v-else>验证码已过期</p>
  </div>
</template>

<script>
import { useCountdown } from '@vueuse/core'

export default {
  setup() {
    const { isReady, active, elapsed, restart, pause, resume, reset } = useCountdown(60)

    const sendCode = () => {
      // 发送验证码
      restart()
    }

    return {
      isReady,
      active,
      elapsed,
      sendCode
    }
  }
}
</script>