富贵资源网 Design By www.hznty.com
开启倒计时,直接保存到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倒计时刷新页面不会从头开始的资料请关注其它相关文章!
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...