vue倒計(jì)時(shí)刷新頁(yè)面不會(huì)從頭開(kāi)始的解決方法
開(kāi)啟倒計(jì)時(shí),直接保存到vuex中,且存儲(chǔ)到本地持久化
// state.jsconst runTime = localStorage.getItem(’time’);paymentRunTime:runTime
// mutations.jsTimeReduction(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 placeholder='輸入驗(yàn)證碼' auto-focus /> <div v-if='showtime===null' @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)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. 編程語(yǔ)言PHP在Web開(kāi)發(fā)領(lǐng)域的優(yōu)勢(shì)在哪?2. Android如何加載Base64編碼格式圖片3. 什么是python的自省4. 詳解Android studio 動(dòng)態(tài)fragment的用法5. 基于android studio的layout的xml文件的創(chuàng)建方式6. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁(yè)效果(實(shí)例代碼)7. 解決Android studio xml界面無(wú)法預(yù)覽問(wèn)題8. 圖文詳解vue中proto文件的函數(shù)調(diào)用9. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟10. 在IDEA中實(shí)現(xiàn)同時(shí)運(yùn)行2個(gè)相同的java程序

網(wǎng)公網(wǎng)安備