短信验证码倒计时 (直接复制即可使用) vue3

需求：

要实现一个获取验证码的需求，点击获取验证码60秒内不可以重复点击，方式有两种可以直接复制使用；

效果图

在这里插入图片描述

实现方案

方案1 (单个文件内使用比较推荐)

<el-button :disabled="codeDisabled" @click.stop="handleSendCode">
  <span>{{ codeDisabled ? `重新发送 ${countdown}` : '获取验证码' }} </span>
</el-button>

  
  // 是否禁用按钮
const codeDisabled = ref(false)
// 倒计时秒数
const countdown = ref(60)

// 点击获取验证码
const handleSendCode = () => {
  codeDisabled.value = true
  const interval = setInterval(() => {
    countdown.value -= 1;
    if (countdown.value <= 0) {
      clearInterval(interval)
      codeDisabled.value = false
    }
  }, 1000)
}

方案2 (自定义hook 多个文件使用推荐)

首先，创建一个新的文件，例如 useCountdown.ts


// useCountdown.ts
import { ref } from 'vue';

export function useCountdown(initialTime = 5) {
  const codeDisabled = ref(false);
  const countdown = ref(initialTime);

  const startCountdown = () => {
    codeDisabled.value = true;
    countdown.value = initialTime;
    
    const interval = setInterval(() => {
      countdown.value -= 1;
      if (countdown.value <= 0) {
        clearInterval(interval);
        codeDisabled.value = false;
      }
    }, 1000);
  };

  return {
    codeDisabled,
    countdown,
    startCountdown
  };
}

组件中使用这个自定义组合函数

<template>
  <el-button :disabled="codeDisabled" @click.stop="handleSendCode">
    <span>
      {{ codeDisabled ? `重新发送 ${countdown}` : '获取验证码' }}
    </span>
  </el-button>
</template>
// 导入
import { useCountdown } from './useCountdown';
// 解构
const { codeDisabled, countdown, startCountdown } = useCountdown(5);

// 按钮点击事件
const handleSendCode = () => {
      startCountdown();
    };