vue倒计时刷新页面不会从头开始的解决方法
程序员文章站
2023-02-20 14:02:23
开启倒计时,直接保存到vuex中,且存储到本地持久化// state.jsconst runtime = localstorage.getitem('time');paymentruntime:run...
开启倒计时,直接保存到vuex中,且存储到本地持久化
// 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); },
在需要用到的页面钩子函数调用方法, created(){ this.$store.commit(timereduction) }
知识点扩展:
倒计时实例代码:
<template> <div class="captcha-row"> <input class="captcha-input" placeholder="输入验证码" auto-focus /> <div v-if="showtime===null" class="captcha-button" @click="send"> 获取验证码 </div> <div v-else class="captcha-button"> {{showtime}} </div> </div> </template>
<script> export default { data() { return { // 计时器,注意需要进行销毁 timecounter: null, // null 则显示按钮 秒数则显示读秒 showtime: null } }, methods: { // 倒计时显示处理 countdowntext(s) { this.showtime = `${s}s后重新获取` }, // 倒计时 60秒 不需要很精准 countdown(times) { const self = this; // 时间间隔 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倒计时刷新页面不会从头开始的解决方法的详细内容,更多关于vue倒计时刷新页面不会从头开始的资料请关注其它相关文章!