Vue3 制作发送验证码倒计时

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• Vue3 制作发送验证码倒计时
• 前言
• 一、怎么制作验证码定时器包？
• • • • 采用 VueUse的包。useIntervalFn( )
• 二、使用步骤
• • 1.设置发送验证码按钮
  • 2.功能实现
  • 3.样式
• 总结

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、怎么制作验证码定时器包？

采用 VueUse的包。useIntervalFn( )

 useIntervalFn(定时的回调，回调的时间间隔，控制回调的调用方式)
参数三 {immediate: true, immediateCallback: false}
 3-1) immediate 立刻开启定时任务（默认值true表示默认开启）
 3-2）immediateCallback 执行useIntervalFn函数立刻执行回调（在延时时间的前或者后调用），默认值是false，如果修改为true，表示为不延时，立刻启动定时任务（不要使用pause方法）
pause用于控制定时暂停；resume控制定时器重启

二、使用步骤

1.设置发送验证码按钮

代码如下（示例）：

 <span @click='sendCode' class="code">   {{timer === 0? "发送验证码": `${time}秒后发送`}} </span>

2.功能实现

代码如下（示例）：

import { useIntervalFn } from '@vueuse/core'
// 控制发送验证码的倒计时效果
const timer=ref(0)
const {pause,resume }useIntervalFn(()=>{
   每次定时任务 控制时间递减
  if(timer.value<=0){
    // 停止递减：停止定时器
    pause()
  }else{
     timer.value-=1
  }
},1000,{
      // 首次是否自动启动定时任务：true（默认值，自动启动），false，不需要自动启动
      immediate: false,
      // 是否延时执行定时任务（false(默认值)，不延时；true表示延时）
      immediateCallback: false
    })
// 发送验证码
const sendCode=async()=>{
  //开启定时效果
  if (timer.value===0){
     timer.value=60
    // 重启定时器
     resume()
  }else{
    return 
  }
}

3.样式

代码如下（示例）：

.code {
          position: absolute;
          right: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 14px;
          background: #f5f5f5;
          color: #666;
          width: 90px;
          height: 34px;
          cursor: pointer;
        }

总结

提示：这里对文章进行总结：
以上就是今天要讲的内容，本文仅仅简单介绍了useIntervalFn的使用。useIntervalFn实现了发送验证码后禁用和重新开启定时器的效果