vue3实现短信验证码倒计时

可以通过 Vue3 的 reactive、watchEffect 和 setInterval 方法实现验证码倒计时：

<template>  <div>    <button :disabled='countdown > 0' @click='sendVerificationCode'>发送验证码</button>    <span v-if='countdown > 0'>{{ countdown }} 秒后重新发送</span>  </div></template>
<script>import { reactive, watchEffect } from 'vue'
export default {  setup() {    const state = reactive({      countdown: 0,      timer: null    })
    const sendVerificationCode = () => {      state.countdown = 60      state.timer = setInterval(() => {        if (state.countdown > 0) {          state.countdown--        } else {          clearInterval(state.timer)        }      }, 1000)    }
    watchEffect(() => {      if (state.countdown === 0) {        clearInterval(state.timer)      }    })
    return {      state,      sendVerificationCode    }  }}</script>




在 setup 函数中，我们创建了一个名为 state 的响应式对象，其中 countdown 属性表示还剩多少秒可以重新发送验证码。

sendVerificationCode 方法用于点击后发送验证码并开始倒计时。在 sendVerificationCode 方法中，我们将 countdown 设置为 60，并创建一个定时器，每隔一秒钟就将 countdown 减 1。当 countdown 为 0 时，我们清除定时器。

watchEffect 方法用于监听 countdown 的变化，当 countdown 变为 0 时，我们清除定时器。

在模板中，我们使用 disabled 属性禁用发送验证码按钮，直到倒计时结束。当 countdown 大于 0 时，我们显示剩余秒数。

总结：

Vue 3中，实现短信验证码倒计时可以通过结合响应式数据和计时器来完成。首先，在组件的data选项中定义一个timer变量和一个countDown的倒计时时间。然后，使用v-if指令根据countDown的值控制显示验证码或倒计时按钮。接着，在mounted钩子函数中使用setInterval函数每秒更新countDown的值，并在倒计时结束后清除计时器。最后，通过点击按钮触发发送验证码请求，并在成功返回后重新设置countDown的值开始新一轮的倒计时。这样就实现了简单而高效的短信验证码倒计时功能。