useIntervalFn
const { pause, resume, isActive } = useIntervalFn(()=>{}, 1000, {})
useIntervalFn可获取到两个方法和一个属性,pause暂停计时器,resume恢复计时器,isActive表示当前计时器的活动状态
div内容
<el-button @click="getCaptcha" :disabled="isActive">{{ captchaText }}</el-button>
disabled属性绑定的是计时器的isActive,与其联动来控制获取验证码按钮的可用性,captchaText为显示的按钮文本
js内容
// 验证码倒计时时间
let countTime = ref(5);
const { pause, resume, isActive } = useIntervalFn(
() => {
if (countTime.value > 1) {
countTime.value--;
captchaText.value = `${countTime.value}s后重新获取`;
} else {
countTime.value = 5;
captchaText.value = "获取验证码";
pause(); // 倒计时为0时,触发计时器的暂停方法
}
},
1000, // 计时器触发的间隔时间
{ immediate: false }, // 首次是否触发
);
/**
* 获取验证码
*/
const getCaptcha = () => {
captchaText.value = `${countTime.value}s后重新获取`;
resume(); // 恢复计时器活动状态
};