vue倒计时刷新页面不会从头开始的解决方法_vue倒计时

vue

5 浏览量更新于2023-05-09 评论收藏 35KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue倒计时刷新页面不会从头开始的解决方法倒计时刷新页面不会从头开始的解决方法

在本篇文章里小编给大家整理的是关于vue倒计时刷新页面不会从头开始的解决方法，需要的朋友们参考下。

开启倒计时，直接保存到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) }

知识点扩展：知识点扩展：

倒计时实例代码：

获取验证码

</div>

</div>

</template>

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);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38744526

粉丝: 16
资源: 960

会员权益专享

vue倒计时刷新页面不会从头开始的解决方法

评论0

会员权益专享

最新资源

vue倒计时刷新页面不会从头开始的解决方法

评论0

倒计时防刷新代码

刷新不重置，开始结束时间可修改倒计时

Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

vue订单待支付倒计时刷新页面不会重置时间 代码

vue显示倒计时，倒计时结束自动刷新页面

vue刷新页面显示倒计时

vue倒计时刷新不重置

vue3 router刷新页面

vue2刷新页面的方法

vue 倒计时天数

vuetabs切换刷新页面

vue2强制刷新页面的方法

vue 短信倒计时60s

vue 倒计时插件推荐

vue 接口整点倒计时自动刷新

vue 手机端刷新页面

vue3强制刷新页面

vue页面刷新数据丢失解决方法

vue倒计时时分秒组件

vue3实时刷新页面

会员权益专享

最新资源

vue订单待支付倒计时刷新页面不会重置时间代码