HTML代码
<span class="red">{{minutes}}分{{second}}秒</span>
JS代码
export default {
data() {
return {
minutes: 0, //分
seconds: 59, //秒
}
} ,
methods: {
// 倒计时
num(n) {
// 倒计时结束重新刷新页面
if (this.minutes === 0 && this.seconds === 2) {
this.$message.warning('支付倒计时结束!即将刷新页面!');
}
if (this.minutes === 0 && this.seconds === 0) {
window.location.reload();
}
return n < 10 ? '0' + n : '' + n;
},
// 倒计时
timer() {
var _this = this;
var time = window.setInterval(function() {
if (_this.seconds === 0 && _this.minutes !== 0) {
_this.seconds = 59;
_this.minutes -= 1;
} else if (_this.minutes === 0 && _this.seconds === 0) {
_this.seconds = 0;
window.clearInterval(time);
} else {
_this.seconds -= 1;
}
}, 1000);
},
},
mounted() {
// 倒计时
this.timer();
},
watch: {
// 倒计时
second: {
handler(newVal) {
this.num(newVal);
},
},
// 倒计时
minute: {
handler(newVal) {
this.num(newVal);
},
},
},
computed: {
// 倒计时
second: function() {
return this.num(this.seconds);
},
minute: function() {
return this.num(this.minutes);
},
},
}
