使用Vueuse的useIntervalFn方法制作一个获取验证码倒计时按钮

useIntervalFn

const { pause, resume, isActive } = useIntervalFn(()=>{}, 1000, {})
1

useIntervalFn可获取到两个方法和一个属性，pause暂停计时器，resume恢复计时器，isActive表示当前计时器的活动状态

div内容

<el-button @click="getCaptcha" :disabled="isActive">{{ captchaText }}</el-button>
1

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(); // 恢复计时器活动状态
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25