前言

今天用@vueuse/core中提供的一个方法，实现发送验证码时倒计时的一个效果。这样的场景使我们经常会见到的，一起来看一下如何实现

一、应用场景

用户选择手机号和验证码登录的时候，往往需要填写手机号后，点击发送验证码来进行后续操作。那么发送验证码的动作应该有一个限制，不然用户一直点击按钮，不但会给用户带来经济损失，也会发送很不必要的请求给后台。

所以对用户点击发送验证码后的按钮，进行一个倒计时的防抖操作是必须的。

二、代码演示

用到的button全局组件 ===》vue3——自己封装按钮组件
使用@vueuse/core中的useIntervalFn来帮助我们完成这项工作

首先需要在项目根目录下打开任意终端,执行npm i @vueuse/core@5.3.0

代码如下（示例）：

<template><div class="home-container"><my-button type="plain" size="middle" @click="sendCode">{{timer === 0 ? '发送验证码' : `${timer}s后重新获取`}}</my-button></div>
</template><script>
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/core'
export default {name: 'App',setup() {// 倒计时const timer = ref(0)// 发送验证码倒计时// useIntervalFn(定时的回调，回调的时间间隔，控制回调的调用方式)// 参数三 {immediate: true, immediateCallback: false}// 3-1) immediate 首次运行useIntervalFn函数时，是否立刻开启定时任务（默认值true表示默认开启）// 3-2）immediateCallback 执行useIntervalFn函数立刻执行回调（在延时时间的前或者后调用），默认值是false，如果修改为true，表示为不延时，立刻启动定时任务（不要使用pause方法）// pause暂停；resume启动const { pause, resume } = useIntervalFn(() => {if (timer.value <= 0) {// 停止定时任务pause()} else {// 单次定时任务执行的回调timer.value--}},1000,{// 默认不开启定时任务immediate: false})// 发送验证码const sendCode = () => {// 开启倒计时效果if (timer.value === 0) {timer.value = 60resume()} else {return}// 这里写向后台发送请求的代码console.log('发送请求')}return { timer, sendCode }}
}
</script><style lang="less">
.home-container {margin: 100px auto;width: 300px;height: 100px;
}
</style>