需求：

要实现一个获取验证码的需求，点击获取验证码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 = trueconst interval = setInterval(() => {countdown.value -= 1;if (countdown.value <= 0) {clearInterval(interval)codeDisabled.value = false}}, 1000)
}

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

1. 首先，创建一个新的文件，例如 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};
}

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

<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();};