vue 封装组件之活动倒计时组件

<template>
  <div class="count-down">
    <span class="count-down-end-time">{{endHours}}点场</span>
    <span class="count-down-surplus">{{surplus | filterTime}}</span>
  </div>
</template>

<script>
export default {
  props: {
  // 接收父组件传入的时间
    endHours: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      surplus: '',
      diffSeconds: 0,
      interval: undefined
    }
  },
  methods: {
    computedSurplusTime() {
      if (this.interval) {
        clearInterval(this.interval)
      }
      const date = new Date()
      if (date.getHours() > this.endHours) {
        this.surplus = '活动已结束'
        return
      }
      if (date.getHours() === this.endHours) {
        this.surplus = '活动进行中'
        return
      }
      if (date.getHours() < this.endHours) {
        this.surplus = '活动未开始'
      }

      const diffHours = this.endHours - date.getHours() - 1
      const diffMinutes = 60 - date.getMinutes() - 1
      const diffSeconds = 60 - date.getSeconds()

      this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds

      this.interval = setInterval(() => {
        this.diffSeconds -= 1
      }, 1000)
    }
  },
  watch: {
    diffSeconds(newV) {
      const hours = Math.floor(newV / 3600)
      const minutes = Math.floor(newV / 60) % 60
      const seconds = newV % 60
      this.surplus = hours + ':' + minutes + ':' + seconds

      if (newV === 0) {
        this.computedSurplusTime()
      }
    },
    endHours() {
      this.computedSurplusTime()
    }
  },
  created() {
    this.computedSurplusTime()
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.count-down {
  display: inline-block;
  font-size: px2rem(14);
  margin-left: px2rem(8);

  span {
    display: inline-block;
    padding: px2rem(2) px2rem(4);
  }

  &-end-time {
    background-color: #d81e06;
    border-top-left-radius: px2rwm(4);
    border-bottom-left-radius: px2rwm(4);
    border: px2rem(1) solid #d81e06;
  }

  &-surplus {
    background-color: #fff;
    border-top-right-radius: px2rem(4);
    border-bottom-right-radius: px2rem(4);
    border: px2rem(1) solid #d81e06;
    color: #d81e06;
  }
}
</style>

filters.js

（main.js中引入，即可使用）

import Vue from 'vue'

Vue.filter('filterTime', function(value) {
  if (!value) {
    return ''
  }

  if(value.indexOf(':') === -1) {
    return value
  }

  let result = ''
  const arr = value.split(':')
  if (parseInt(arr[0]) < 10) {
    result = '0' + arr[0]
  } else {
    result = arr[0]
  }

  if (parseInt(arr[1]) < 10) {
    result = result + ':0' + arr[1]
  } else {
    result = result + ':' + arr[1]
  }

  if (parseInt(arr[2]) < 10) {
    result = result + ':0' + arr[2]
  } else {
    result = result + ':' + arr[2]
  }

  return result
})

使用

<count-down :endHours="9"></count-down>