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

在Vue开发项目时，时常用会倒计时这个功能，于是封装了一个Vue倒计时组件，那里需要用倒计时就引入它即可。这个Vue倒计时组件用到watch监听endTime数据的变化，有tab切换时endTime数据是变化了的，如果没有watch监听器，再次切换

在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倒计时组件效果如下：