在 Vue 3 中，实现 "获取验证码 + 60秒倒计时" 功能可以通过以下方式完成：

完整代码示例

<template>
  <button 
    @click="getVerificationCode" 
    :disabled="isCounting"
  >
    {{ buttonText }}  </button></template><script setup>import { ref } from 'vue';const countdown = ref(60); // 倒计时秒数const isCounting = ref(false); // 是否正在倒计时const buttonText = ref('获取验证码'); // 按钮文字// 获取验证码并开始倒计时const getVerificationCode = () => {
  if (isCounting.value) return; // 防止重复点击
  
  // 1. 调用后端API发送验证码（模拟）
  console.log("验证码已发送");
  
  // 2. 开始倒计时
  isCounting.value = true;
  startCountdown();};// 倒计时逻辑const startCountdown = () => {
  buttonText.value = `${countdown.value}秒后重新获取`;
  
  const timer = setInterval(() => {
    countdown.value--;
    buttonText.value = `${countdown.value}秒后重新获取`;
    
    if (countdown.value <= 0) {
      clearInterval(timer);
      resetCountdown();
    }
  }, 1000);};// 重置倒计时const resetCountdown = () => {
  isCounting.value = false;
  countdown.value = 60;
  buttonText.value = '获取验证码';};</script><style scoped>button:disabled {
  opacity: 0.6;
  cursor: not-allowed;}</style>

关键点说明

1. 状态管理

• countdown: 存储当前剩余秒数（从60开始）。

• isCounting: 防止用户重复点击触发多次倒计时。

• buttonText: 动态显示按钮文字（如“60秒后重新获取”）。

2. 倒计时逻辑

• 点击按钮后，调用 setInterval 每秒更新 countdown。

• 当 countdown 归零时，清除定时器并重置状态。

3. 用户体验优化

• 按钮禁用 (:disabled="isCounting") 避免重复请求。

• 样式调整（如禁用时透明度降低）。

实际应用中的注意事项

1. 对接后端API

• 在 getVerificationCode 中替换 console.log 为实际的验证码请求：

• axios.get('/api/send-code?phone=123456789').then(() => {
    startCountdown(); // 请求成功后再开始倒计时});

2. 组件卸载时清理定时器

• 如果在组件中使用，需在 onUnmounted 中清除定时器：

• import { onUnmounted } from 'vue';let timer;onUnmounted(() => clearInterval(timer));

3. 防抖处理（可选）

• 防止用户快速连续点击：

• import { debounce } from 'lodash-es';const getVerificationCode = debounce(() => { ... }, 500);

效果演示

• 初始状态：按钮显示“获取验证码”。

• 点击后：按钮变为“60秒后重新获取”并开始倒计时。

• 倒计时结束：恢复初始状态。

通过以上代码，你可以轻松实现一个符合业务需求的验证码倒计时功能。