You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<p>视频监控页面</p>
|
|
<p>Remaining time: {{ remainingTime }}</p>
|
|
<el-button @click="toggleCountdown">{{ isrRuning ? '暂停' : '开始' }}</el-button>
|
|
</div>
|
|
</template>
|
|
<style lang="less">
|
|
p {
|
|
font-size: 20px;
|
|
color: @color-white;
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
totalTime: 15,
|
|
remainingTime: 15,
|
|
isrRuning: false,
|
|
timer: null
|
|
};
|
|
},
|
|
methods: {
|
|
startCountdown() {
|
|
console.log('开始倒计时');
|
|
this.timer = setInterval(() => {
|
|
if (this.remainingTime <= 0) {
|
|
clearInterval(this.timer);
|
|
this.remainingTime = this.totalTime;
|
|
this.startCountdown();
|
|
} else {
|
|
this.remainingTime--;
|
|
}
|
|
}, 1000);
|
|
},
|
|
pauseCountdown() {
|
|
console.log('暂停倒计时');
|
|
clearInterval(this.timer);
|
|
},
|
|
toggleCountdown() {
|
|
if (this.isrRuning) {
|
|
this.pauseCountdown();
|
|
} else {
|
|
this.startCountdown();
|
|
}
|
|
this.isrRuning = !this.isrRuning;
|
|
}
|
|
}
|
|
};
|
|
</script>
|