见如下代码
<template>
<div>
<div class="content">
数据总采集次数:{{ clearTimes }} | 距离下次更新<span
>{{ minute }}:{{ second }}</span
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
minutes: 15,
seconds: 0,
};
},
methods: {
num: function (n) {
return n < 10 ? "0" + n : "" + n;
},
add: function () {
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);
},
},
props: {
clearTimes: {
type: Number,
default: 0,
},
intervalFlag: {
type: Number,
default: 0,
},
},
mounted() {
this.add();
},
watch: {
intervalFlag: {
handler() {
this.minutes = 15;
this.seconds = 0
},
},
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);
},
},
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
display: flex;
justify-content: flex-end;
height: 30px;
}
</style>