<template>
<span>{{hour? hourString+':'+minuteString+':'+secondString : minuteString+':'+secondString}}</span>
</template>
<script>
export default {
data () {
return {
hour: '',
minute: '',
second: '',
timer: ''
}
},
props: {
remainTime: { // 倒计时间总秒数
default: ''
}
},
mounted () {
if (this.remainTime > 0) {
this.hour = Math.floor((this.remainTime / 3600) % 24)
this.minute = Math.floor((this.remainTime / 60) % 60)
this.second = Math.floor(this.remainTime % 60)
this.countDowm()
}
},
methods: {
countDowm () {
var self = this
clearInterval(this.timer)
this.timer = setInterval(function () {
if (self.hour === 0) {
if (self.minute !== 0 && self.second === 0) {
self.second = 59
self.minute -= 1
} else if (self.minute === 0 && self.second === 0) {
self.second = 0
self.$emit('countDowmEnd', true)
clearInterval(self.timer)
} else {
self.second -= 1
}
} else {
if (self.minute !== 0 && self.second === 0) {
self.second = 59
self.minute -= 1
} else if (self.minute === 0 && self.second === 0) {
self.hour -= 1
self.minute = 59
self.second = 59
} else {
self.second -= 1
}
}
}, 1000)
},
formatNum (num) {
return num < 10 ? '0' + num : '' + num
}
},
computed: {
hourString () {
return this.formatNum(this.hour)
},
minuteString () {
return this.formatNum(this.minute)
},
secondString () {
return this.formatNum(this.second)
}
}
}
</script>
vue倒计时组件(时分秒)
最新推荐文章于 2024-04-30 17:57:14 发布