vue中封装倒计时组件

你或许遇到过，在项目里总会有倒计时，而且是多处用到，这样，你就不得不考虑下复用了

---

效果图

代码如下

downTime.vue 这只是个组件名称，或许你不喜欢。

<template>
  <!-- 倒计时组件 -->
  <div class="downTime-wrapper">
    <!-- 这里是显示还未结束时的内容，这里只是我这得布局，你可以随意。 -->
    <div class="time" v-show="!isShow">
      <span class="hour">{{myDay}}</span> : 
      <span class="hour">{{myHours}}</span> :
      <span class="minute">{{myMinutes}}</span> :
      <span class="second">{{mySeconds}}</span>
    </div>
    <!-- 这里是显示结束后的内容 -->
    <span class="second" v-show="isShow">{{clocker}}</span>
  </div>
</template>

<script>
export default {
  name: 'downTime',

  props: { // 接收父组件传递过来的参数,这里传了  结束时间 - 开始时间 - 结束后显示的内容
    endTime: {
      type: Number
    },
    startTime: {
      type: Number
    },
    endMsg: {
      type: String
    }
  },

  data () {
    return {
      isShow: false, // 控制显示结束或还未结束显示的内容
      clocker: '', // 结束后显示的内容
      timeObj: null, // 时间对象,下方会用到
      myDay: 0, // 我定义来接收计算出来的 天 的
      myHours: 0, // 我定义来接收计算出来的 小时 的
      myMinutes: 0, // 我定义来接收计算出来的 分钟 的
      mySeconds: 0// 我定义来接收计算出来的 秒钟 的
    }
  },

  mounted () {
    // 计算时间差
    let timeLag = (this.endTime - this.startTime) / 1000
    // 判断当前是否时分秒的值是否大于10
    let add = num => {
      return num < 10 ? '0' + num : num
    }
    // 时间倒计时运算的方法
    let timeFunction = () => {
      let time = timeLag--
      this.timeObj = { // 时间对象
        seconds: Math.floor(time % 60),
        minutes: Math.floor(time / 60) % 60,
        hours: Math.floor(time / 60 / 60) % 24,
        days: Math.floor(time / 60 / 60 / 24)
      }
      // 计算出时分秒
      this.myDay = `${add(this.timeObj.days)}`
      this.myHours = `${add(this.timeObj.hours)}`
      this.myMinutes = `${add(this.timeObj.minutes)}`
      this.mySeconds = `${add(this.timeObj.seconds)}`
      // 当时间差小于等于0时,停止倒计时
      if (time <= 0) {
        this.isShow = true
        this.clocker = this.endMsg || '该团已经结束'
        clearInterval(go)
      }
    }
    // 开始执行倒计时
    timeFunction()
    // 每一秒执行一次
    let go = setInterval(() => {
      timeFunction()
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.downTime-wrapper{
  font-size: 0.12rem;
  font-weight: bold;
  // .hour{}
  // .minute{}
  .second{
    color: rgb(235, 62, 61);
  }
}
</style>

---

父组件

<template>
  <!-- 这里传的是时间戳 -->
  <downTime
    :endTime="endTime"
    :startTime="new Date().getTime()"
    :endMsg="倒计时结束"
   />
</template>

然后就这样了 ↓

效果图，本来想动图的，想想还是算了，因为大家都懂的

---

不过这里有个问题，就是当前调用这个倒计时的组件被销毁后，倒计时还在后台继续执行，还没有解决！

---

期待你的答案

好了。下次我忘了再打开看看。