Vue实现倒计时组件(可自定义时间倒计时功能的组件)

在Vue开发项目时，时常用会倒计时这个功能，于是封装了一个Vue倒计时组件，那里需要用倒计时就引入它即可。这个Vue倒计时组件用到watch监听endTime数据的变化，有tab切换时endTime数据是变化了的，如果没有watch监听器，再次切换时就显示"已经结束了"这就不符合需求了，所以要用上watch来监听endTime数据的变化才行，这个Vue倒计时组件是可自定义时间倒计时功能的组件，具体请看代码。

一、创建countDown.vue倒计时组件

<template>
<span :endTime="endTime" :endText="endText">
<slot>
{{content}}
</slot>
</span>
</template>
<script>
export default {
data(){
return {
content: '',
}
},
props:{
endTime:{
type: String,
default :''
},
endText:{
type : String,
default:'已结束'
},
},
watch: {
endTime() {
this.countdowm(this.endTime)
}
},
mounted () {
this.countdowm(this.endTime)
},
methods: {
countdowm(timestamp){
let self = this;
let timer = setInterval(function(){
let nowTime = new Date();
let endTime = new Date(timestamp * 1000);
let t = endTime.getTime() - nowTime.getTime();
if(t>0){
let day = Math.floor(t/86400000);
let hour=Math.floor((t/3600000)%24);
let min=Math.floor((t/60000)%60);
let sec=Math.floor((t/1000)%60);
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let format = '';
if(day > 0){
format = `${day}天${hour}小时${min}分${sec}秒`;
}
if(day <= 0 && hour > 0 ){
format = `${hour}小时${min}分${sec}秒`;
}
if(day <= 0 && hour <= 0){
format =`${min}分${sec}秒`;
}
self.content = format;
}else{
clearInterval(timer);
self.content = self.endText;
}
},1000);
}
}
}
</script>

二、vue倒计时组件的使用方法：

1.引入

import countDown from '@/components/countDown'

2.在components加上countDown

components: {
  countDown
}

3.在template里

<count-down :endTime="endTime" endText="已经结束了" />

说明一下：

1）endTime是一个时间戳，而且是字符串数据类型，需要处理下

let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' '

2）endText是倒计时结束显示的内容

三、vue倒计时组件效果如下：