vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法
更新時(shí)間：2020年03月03日 09:45:58 作者：千杯樂(lè)逍遙
在本篇文章里小編給大家整理的是關(guān)于vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法，需要的朋友們參考下。
開(kāi)啟倒計(jì)時(shí)，直接保存到vuex中，且存儲(chǔ)到本地持久化
// state.js
const runTime = localStorage.getItem('time');
paymentRunTime:runTime
// mutations.js
TimeReduction(state) {
this.timerId = setInterval(() => {
if (state.paymentRunTime === 0) {
state.paymentRunTime = 60;
return clearInterval(this.timerId)
}
state.paymentRunTime -= 1;
localStorage.setItem('time',state.paymentRunTime)
},1000);
},
在需要用到的頁(yè)面鉤子函數(shù)調(diào)用方法， created（）{ this.$store.commit(TimeReduction) }
知識(shí)點(diǎn)擴(kuò)展：
倒計(jì)時(shí)實(shí)例代碼：
<template>
<div class="captcha-row">
<input class="captcha-input" placeholder="輸入驗(yàn)證碼" auto-focus />
<div v-if="showtime===null" class="captcha-button" @click="send">
獲取驗(yàn)證碼
</div>
<div v-else class="captcha-button">
{{showtime}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 計(jì)時(shí)器,注意需要進(jìn)行銷(xiāo)毀
timeCounter: null,
// null 則顯示按鈕 秒數(shù)則顯示讀秒
showtime: null
}
},
methods: {
// 倒計(jì)時(shí)顯示處理
countDownText(s) {
this.showtime = `${s}s后重新獲取`
},
// 倒計(jì)時(shí) 60秒 不需要很精準(zhǔn)
countDown(times) {
const self = this;
// 時(shí)間間隔 1秒
const interval = 1000;
let count = 0;
self.timeCounter = setTimeout(countDownStart, interval);
function countDownStart() {
if (self.timeCounter == null) {
return false;
}
count++
self.countDownText(times - count + 1);
if (count > times) {
clearTimeout(self.timeCounter)
self.showtime = null;
} else {
self.timeCounter = setTimeout(countDownStart, interval)
}
}
},
send() {
this.countDown(60);
}
},
}
</script>
以上就是vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法的詳細(xì)內(nèi)容，更多關(guān)于vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
在使用 Vue 開(kāi)發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級(jí)的技術(shù)點(diǎn)，總會(huì)有用的，本文就介紹了15個(gè)Vue技巧，具有一定的參考價(jià)值，感興趣的可以了解一下2022-02-02
這篇文章主要介紹了使用異步組件優(yōu)化Vue應(yīng)用程序的性能，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue中自動(dòng)生成路由配置文件覆蓋路由配置的思路詳解
這篇文章主要介紹了Vue中自動(dòng)生成路由配置文件覆蓋路由配置的思路詳解,大概思路是讀取@/views下所有index.vue如果當(dāng)前文件下有包含相同路徑則認(rèn)為是它的子路由,需要的朋友可以參考下2024-05-05
Vue實(shí)施重新發(fā)布和軟件熱更新的經(jīng)驗(yàn)分享
在Web應(yīng)用的開(kāi)發(fā)周期中,版本管理和軟件熱更新是一個(gè)不可或缺的話(huà)題,隨著Vue.js框架的流行,越來(lái)越多的應(yīng)用程序選擇使用Vue來(lái)構(gòu)建前端,本文將探討在Vue應(yīng)用中實(shí)施重新發(fā)布和熱更新的最佳實(shí)踐,需要的朋友可以參考下2024-09-09
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建，本文給大家分享實(shí)例代碼，需要的朋友可以參考下2019-12-12
手動(dòng)實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理詳解
這篇文章主要給大家介紹了關(guān)于手動(dòng)實(shí)現(xiàn)vue2.0的雙向數(shù)據(jù)綁定原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue2 Element Schema Form 配置式生成表單的實(shí)現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05