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

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

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

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

1.引入

import countDown from '@/components/countDown'

2.在components加上countDown

components: {
  countDown
}

3.在template里

说明一下：

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

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

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

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