You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
1.7 KiB
99 lines
1.7 KiB
<template>
|
|
<view><slot :time="time" :remain="timeData.remain" :day="timeData.day" :hour="timeData.hour" :minute="timeData.minute" :second="timeData.second" /></view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 倒计时时长（单位：毫秒）
|
|
time: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
|
|
// 是否自动
|
|
'autoStart': {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
timeData: {
|
|
remain: 0,
|
|
day: 0,
|
|
hour: 0,
|
|
minute: 0,
|
|
second: 0
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
time() {
|
|
this.reset()
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// 设置timeData
|
|
updateTimeData() {
|
|
let t = this.timeData.remain;
|
|
this.timeData.day = Math.floor(t / 1000 / 60 / 60 / 24);
|
|
this.timeData.hour = Math.floor((t / 1000 / 60 / 60) % 24);
|
|
this.timeData.minute = Math.floor((t / 1000 / 60) % 60);
|
|
this.timeData.second = Math.floor((t / 1000) % 60);
|
|
},
|
|
|
|
// 开启倒计时
|
|
startTimer() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
}
|
|
if(this.timeData.remain < 1000) {
|
|
return
|
|
}
|
|
this.timer = setInterval(() => {
|
|
this.timeData.remain -= 1000;
|
|
this.updateTimeData()
|
|
if (this.timeData.remain < 1000) {
|
|
this.pause()
|
|
this.$emit('finish');
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
// 重置倒计时
|
|
reset() {
|
|
this.timeData.remain = this.time;
|
|
this.updateTimeData();
|
|
if(this.autoStart) {
|
|
this.start()
|
|
}
|
|
|
|
},
|
|
|
|
// 暂停倒计时
|
|
pause() {
|
|
if(this.timer) {
|
|
clearInterval(this.timer);
|
|
this.timer = null
|
|
}
|
|
},
|
|
|
|
// 开始倒计时
|
|
start() {
|
|
if(this.timer) {
|
|
return
|
|
}
|
|
this.startTimer();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.reset();
|
|
},
|
|
beforeDestroy() {
|
|
this.pause()
|
|
}
|
|
};
|
|
</script>
|
|
|