VUE组件 之 倒计时(防刷新)
2018-08-09 16:52
381 查看
思路:
一、效果图:
二、CSS代码
.box{ width: 300px; height: 100px; line-height: 100px; margin: 100px auto; background-color: #eee; text-align: center; font-size: 30px; color: #666; } .count-number{ color: red; font-size: 30px; font-weight: bold; }
三、HTML代码
<div class="wrap"> <countdown seconds="15" index="1"></countdown> <countdown seconds="30" index="2"></countdown> </div>
四、JAVASCRIPT代码
// 倒计时组件 Vue.component('countdown', { props: ['seconds', 'index'], data: () => { return { timerCount: 0 } }, mounted() { this.timing(); }, methods: { timing() { let startTime = localStorage.getItem(`startTime${this.index}`); let nowTime = new Date().getTime(); if(startTime) { let surplus = this.seconds - parseInt((nowTime-startTime) / 1000, 10); this.timerCount = surplus <= 0 ? 0 : surplus; } else { this.timerCount = this.seconds; localStorage.setItem(`startTime${this.index}`, nowTime); } let timer = setInterval(() => { if(this.timerCount > 0 && this.timerCount <= this.seconds) { this.timerCount--; } else { localStorage.removeItem(`startTime${this.index}`); clearInterval(timer); } }, 1000); } }, template: `<div class="box">倒计时 <span class="count-number">{{timerCount < 10 ? '0' + timerCount : timerCount}}</span> 秒</div>` }); // Vue实例 new Vue({ el: '.wrap' });
相关文章推荐
- VUE发送短信倒计时组件代码
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- 基于vue2.0的活动倒计时组件countdown(附源码下载)
- vue 后台数据获取与组件渲染、页面刷新数据消失的问题小结
- 移动端刷新组件XtnScroll--Vue实现
- vue中倒计时组件的实例代码
- Vuejs刷新页面子组件数据丢失问题的一点笔记
- vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新 组件重新渲染
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- vue笔记之组件案例-实现评论的发表和自动刷新列表
- vue强制刷新组件
- VUE 中 使用 iview Form组件 enter键防止页面刷新
- vue-router中关于组件复用页面不刷新的问题
- vue-router组件状态刷新消失的问题
- vue数据改变但是进入组件不刷新
- 基于vue2.0的活动倒计时组件countdown(附源码下载)
- 使用Vue开发动态刷新Echarts组件的教程详解
- VUE发送短信倒计时组件代码
- Vue 获取验证码倒计时组件