Vue3 实现验证码倒计时功能

下面是关于“Vue3 实现验证码倒计时功能”的完整攻略：

1. 创建 Vue3 项目

首先需要创建一个 Vue3 的项目，这里使用 Vue CLI 工具来创建：

vue create vue3-captcha

然后使用以下命令启动项目：

cd vue3-captcha
npm run serve

2. 编写倒计时组件

接下来，我们需要编写一个倒计时组件，用于实现验证码倒计时功能，该组件可以接收两个 prop，一个是倒计时的秒数，一个是倒计时结束后显示的文本：

<template>
  <div v-if="showCountdown">{{ countDown }}</div>
  <div v-else>{{ buttonText }}</div>
</template>

<script>
import { ref, watchEffect } from 'vue'

export default {
  props: {
    seconds: {
      type: Number,
      required: true
    },
    buttonText: {
      type: String,
      default: '发送验证码'
    }
  },
  setup(props) {
    const countDown = ref(props.seconds) // 倒计时秒数
    const showCountdown = ref(false) // 是否显示倒计时

    const sendCode = () => {
      // 发送验证码逻辑
      showCountdown.value = true // 显示倒计时
    }

    // 监听倒计时秒数变化
    watchEffect(() => {
      const timer = setInterval(() => {
        if (countDown.value <= 1) {
          clearInterval(timer)
          showCountdown.value = false // 隐藏倒计时
        } else {
          countDown.value -= 1
        }
      }, 1000)
      return () => clearInterval(timer)
    })

    return { countDown, showCountdown, sendCode }
  }
}
</script>

在上述代码中，我们使用 ref 来定义 countDown 和 showCountdown 变量，前者用于存储倒计时秒数，后者则用于判断是否显示倒计时。在 sendCode 函数中，我们可以编写发送验证码的逻辑代码。同时，使用 watchEffect 来监听倒计时秒数的变化，当倒计时结束后，会清除 setInterval 定时器并隐藏倒计时。

3. 使用倒计时组件

有了倒计时组件后，我们就可以在需要发送验证码的地方使用该组件了。下面是一个带有获取验证码按钮的示例：

<template>
  <div>
    <button @click="sendCode" :disabled="showCountdown">{{ buttonText }}</button>
    <countdown :seconds="60" buttonText="重新获取" ref="countdown" />
  </div>
</template>

<script>
import Countdown from './components/Countdown.vue'

export default {
  components: { Countdown },
  methods: {
    sendCode() {
      this.$refs.countdown.sendCode()
    }
  }
}
</script>

在上述代码中，我们引入了倒计时组件 Countdown，并将其注册为当前组件的局部组件。然后我们在模板中使用 Countdown 组件，并设置 ref 属性，这样就可以通过 $refs 来调用倒计时组件中的 sendCode 函数了。最后，通过 :disabled 为按钮设置禁用状态，并设置 buttonText 为 重新获取。

4. 绑定样式

为了美化获取验证码按钮和倒计时样式，我们还需要为它们绑定一些样式。下面是一个简单的示例：

<template>
  <div>
    <button @click="sendCode" :disabled="showCountdown" class="btn">{{ buttonText }}</button>
    <countdown :seconds="60" buttonText="重新获取" ref="countdown" class="countdown" />
  </div>
</template>

<style>
.btn {
  width: 80px;
  height: 32px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.countdown {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  color: #666;
  font-size: 12px;
  text-align: center;
  width: 80px;
  height: 32px;
  line-height: 20px;
}
</style>

在上述代码中，我们为获取验证码按钮添加了一个 btn 类，并设置 background-color, color, border-radius 和 cursor 样式属性。同时，我们也为倒计时组件添加了一个 countdown 类，并设置了边框、背景色、圆角、字体大小等等属性。

5. 总结

至此，我们的验证码倒计时功能已经完成了。在上述过程中，我们创建了一个 Vue3 项目，并编写了一个倒计时组件，使其可以在验证码发送时实现倒计时功能。通过使用 ref 和 watchEffect 监听变量变化，我们将组件分离为了两个阶段，这使得我们可以一边发送验证码一边显示倒计时。

另外，我们也为验证码获取按钮和倒计时组件绑定了样式，让其更美观整洁。