金狮镖局 Design By www.egabc.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倒计时刷新页面不会从头开始的资料请关注其它相关文章!
标签:
vue,倒计时
金狮镖局 Design By www.egabc.com
金狮镖局
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金狮镖局 Design By www.egabc.com
暂无vue倒计时刷新页面不会从头开始的解决方法的评论...
更新日志
2024年11月18日
2024年11月18日
- 【雨果唱片】中国管弦乐《鹿回头》WAV
- APM亚流新世代《一起冒险》[FLAC/分轨][106.77MB]
- 崔健《飞狗》律冻文化[WAV+CUE][1.1G]
- 罗志祥《舞状元 (Explicit)》[320K/MP3][66.77MB]
- 尤雅.1997-幽雅精粹2CD【南方】【WAV+CUE】
- 张惠妹.2007-STAR(引进版)【EMI百代】【WAV+CUE】
- 群星.2008-LOVE情歌集VOL.8【正东】【WAV+CUE】
- 罗志祥《舞状元 (Explicit)》[FLAC/分轨][360.76MB]
- Tank《我不伟大,至少我能改变我。》[320K/MP3][160.41MB]
- Tank《我不伟大,至少我能改变我。》[FLAC/分轨][236.89MB]
- CD圣经推荐-夏韶声《谙2》SACD-ISO
- 钟镇涛-《百分百钟镇涛》首批限量版SACD-ISO
- 群星《继续微笑致敬许冠杰》[低速原抓WAV+CUE]
- 潘秀琼.2003-国语难忘金曲珍藏集【皇星全音】【WAV+CUE】
- 林东松.1997-2039玫瑰事件【宝丽金】【WAV+CUE】