Vue3 实现验证码倒计时功能(刷新保持状态)

下面是详细讲解“Vue3 实现验证码倒计时功能(刷新保持状态)”的完整攻略。

一、需求分析

我们需要在用户登录页面中，实现一个验证码倒计时功能。用户在输入错误的验证码后，可以点击重新获取验证码，重新开始倒计时。同时，用户切换页面或刷新页面后，倒计时功能仍然可以继续。

二、实现思路

我们可以使用 Vue3 中的 Composition API 以及 localStorage 来实现上述需求。

具体思路如下：

1. 使用 ref 定义一个倒计时变量 countdown，初始化为指定的倒计时时间；
2. 使用 computed 定义一个计算属性 countdownText，用于显示倒计时时间的文本；
3. 使用 watch 监听 countdown 的变化，如果倒计时结束，那么将 countdown 重置为初始倒计时时间；
4. 在点击获取验证码时，将倒计时的状态存储在 localStorage 中，以便刷新或切换页面时可以继续倒计时；
5. 在组件初始化时，从 localStorage 中读取倒计时状态，如果存在，则根据存储的倒计时状态重新开始倒计时。

三、代码实现

下面是详细的代码实现：

<template>
  <div>
    <button @click="onRefresh" :disabled="countdown > 0">{{ countdownText }}</button>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    const COUNTDOWN_TIME = 60 // 倒计时时间
    const countdown = ref(0) // 倒计时变量

    // 计算倒计时文本
    const countdownText = computed(() => {
      if (countdown.value === 0) {
        return '获取验证码'
      } else {
        return `重新获取(${countdown.value}s)`
      }
    })

    // 倒计时结束时，重置倒计时变量
    watch(countdown, (value) => {
      if (value === 0) {
        localStorage.removeItem('countdown')
      }
    })

    // 点击重新获取验证码，开始倒计时并存储倒计时状态
    function onRefresh() {
      countdown.value = COUNTDOWN_TIME
      localStorage.setItem('countdown', Date.now() + COUNTDOWN_TIME * 1000)
    }

    // 组件加载时读取倒计时状态，并根据状态重新开始倒计时
    onMounted(() => {
      const endTime = localStorage.getItem('countdown')
      if (endTime) {
        const remainingTime = Math.max(0, endTime - Date.now()) / 1000
        if (remainingTime > 0) {
          countdown.value = remainingTime
        }
      }
    })

    // 返回变量和函数
    return {
      countdown,
      countdownText,
      onRefresh,
    }
  },
}
</script>

在上述代码中，我们使用了 ref、computed、watch 和 onMounted 等 Composition API 的函数来实现验证码倒计时功能，并使用 localStorage 存储了倒计时状态。

四、示例说明

下面是两条示例说明，来演示上述代码的使用场景。

示例一

用户打开登录页面，发现还未获取验证码；用户点击“获取验证码”按钮，并此时会开始倒计时；用户在倒计时结束之前，未能成功输入正确的验证码；用户重新点击“获取验证码”按钮，此时会重新开始倒计时。

# 用户打开登录页面，发现还未获取验证码
按钮文本： 获取验证码

# 用户点击“获取验证码”按钮
按钮文本： 重新获取(60s)

# 倒计时10秒后
按钮文本： 重新获取(50s)

# 用户在倒计时结束之前，未能成功输入正确的验证码

# 用户重新点击“获取验证码”按钮
按钮文本： 重新获取(60s)

# 倒计时5秒后
按钮文本： 重新获取(55s)

示例二

用户打开登录页面，发现已经获取了验证码；用户刚输入了部分验证码，但此时不得不离开页面；用户回到页面后，仍然可以按照之前的倒计时继续输入验证码。

# 用户打开登录页面，已经获取了验证码
按钮文本： 重新获取(50s)

# 用户刚输入了部分验证码，但此时不得不离开页面

# 用户回到页面后
按钮文本： 重新获取(45s)

# 倒计时到达0秒后，又重新开始了倒计时
按钮文本： 重新获取(60s)

这就是“Vue3 实现验证码倒计时功能(刷新保持状态)”的完整攻略。