Vue3實現(xiàn)獲取驗證碼按鈕倒計時效果

更新時間：2024年10月28日 08:54:24 作者：永恒之月℡

這篇文章主要介紹了Vue3實現(xiàn)獲取驗證碼按鈕倒計時效果,用戶點擊獲取驗證碼按鈕,發(fā)送請求給后端,按鈕失效,并且開始倒計時60秒；在此期間,用戶無法再次點擊按鈕,即使用戶刷新頁面,倒計時依然存在,直到倒計時完畢,按鈕恢復,感興趣的小伙伴跟著小編一起來看看吧

Vue3實現(xiàn)獲取驗證碼按鈕倒計時效果

效果描述：用戶點擊獲取驗證碼按鈕，發(fā)送請求給后端，按鈕失效，并且開始倒計時60秒；在此期間，用戶無法再次點擊按鈕，即使用戶刷新頁面，倒計時依然存在，直到倒計時完畢，按鈕恢復。效果圖如下：

實現(xiàn)思路和具體實現(xiàn)

實現(xiàn)思路：

通過響應式變量來，設(shè)置倒計時默認數(shù)據(jù)（按鈕名稱，秒數(shù)，按鈕狀態(tài)）
倒計時函數(shù)，來改變響應式變量里的數(shù)據(jù)，使用周期函數(shù)（window.setInterval），來循環(huán)執(zhí)行。
使用watch函數(shù)來監(jiān)控響應式變量里的數(shù)據(jù)，是否改變，改變就將數(shù)據(jù)保存到LocalStorage中。
使用生命周期函數(shù)onMounted來獲取LocalStorage里面的數(shù)據(jù)，防止用戶刷新。
最后，將數(shù)據(jù)和函數(shù)，綁定到按鈕上。

具體實現(xiàn)：

注意：為了簡潔明了，代碼里只有一個輸入框、按鈕和最重要的邏輯，沒有樣式。用了 element-plus框架，可自行修改。

<template>
	<div>
  <el-input v-model="input" style="width: 125px;margin-right: 10px;" placeholder="請輸入驗證碼" />
   <el-button type="primary" :disabled="countdownInfo.isDisabled" @click="countdown() " style="width:105px;">{{ countdownInfo.buttonName }}</el-button>
	</div>
</template>


<script setup>
    import { ElMessage } from 'element-plus';
	import { ref,watch,onMounted } from 'vue';

      //倒計時信息
    const countdownInfo = ref({
    second: 60,    //倒計時秒
    buttonName: "獲取驗證碼", //按鈕名稱
    isDisabled: false        //按鈕是否有效，默認有效
   })  
    
    //生命周期函數(shù)
    onMounted(() => {
     //獲取localStorage里保存的，倒計時字符串信息，并解析為JSON對象
    var localCountdownInfo = JSON.parse(localStorage.getItem("countdownInfo"));
    //判斷獲取的信息是否為空，為空，說明里面沒有保存數(shù)據(jù)，就不賦值到countdownInfo中
    if (localCountdownInfo) {
        countdownInfo.value =localCountdownInfo;
        //不為空時，判斷倒計時秒數(shù)，是否為60，不是就直接調(diào)用倒計時函數(shù)（說明沒有倒計時完），執(zhí)行倒計時。
        if (countdownInfo.value.second !== 60) {
            countdown()  //調(diào)用倒計時函數(shù)
        }
    }
})


// 定義倒計時函數(shù)
const countdown=()=> {
    countdownInfo.value.isDisabled = true;   //按鈕無效
            //開始倒計時
            let interval = window.setInterval(function () {
                countdownInfo.value.buttonName =  countdownInfo.value.second + "秒后重新獲取"; //重新設(shè)置按鈕名稱
                countdownInfo.value.second = countdownInfo.value.second - 1;   //倒計時減
                //判斷是否減到了0，為0就恢復默認信息，并停止倒計時
                if (countdownInfo.value.second <=0) {
                    countdownInfo.value.buttonName = "獲取驗證碼";
                    countdownInfo.value.second = 60;
                    countdownInfo.value.isDisabled = false;
                    window.clearInterval(interval);
                }
            }, 1000);  //一秒執(zhí)行一次

}

//監(jiān)聽對象，數(shù)據(jù)是否發(fā)生改變，改變就進行重新保存
watch(countdownInfo, (newValue) => {
    var JSONSTR = JSON.stringify(newValue);  //將JSON轉(zhuǎn)為字符串
    localStorage.setItem("countdownInfo", JSONSTR)  //將其保存到localStorage中
}, {
    deep: true   //深度監(jiān)聽
})
</script>

到此這篇關(guān)于Vue3實現(xiàn)獲取驗證碼按鈕倒計時效果的文章就介紹到這了,更多相關(guān)Vue3驗證碼按鈕倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: