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實作了發送驗證碼后禁用和重新開啟定時器的效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/303243.html
標籤：AI
上一篇：WAF繞過-漏洞發現-漏掃繞過