倒计时组件

基于vue2封装的倒计时组件，应用性高，上手即用，不用看代码

这个组件接收四个props参数

const type = 'full'
const lable = ''
const postLable = '后失效'
const timeGap = end_time.value - new Date().getTime() / 1000

当type为full时：样式：

当type为simple时 ：样式：

具体代码也不难，大家看不看都可以，代码可以复制即用

<template>
  <div class="count-down-wrap" :class="type">
    <div v-if="showDesc" class="count-down-text">{{lableText}}</div>
    <template v-if="notSimple">
      <div class="count-down-time">
        <div class="count-down-day">{{countDown.day}}</div>
        <div class="count-down-dot">天</div>
        <div class="count-down-hour">{{countDown.hour}}</div>
        <div class="count-down-dot">:</div>
        <div class="count-down-minute">{{countDown.minute}}</div>
        <div class="count-down-dot">:</div>
        <div class="count-down-second">{{countDown.second}}</div>
      </div>
    </template>
    <template v-else-if="showSimple">
      <div class="count-down-time">
        <div class="count-down-minute">{{countDown.minute}}</div>
        <div class="count-down-dot">:</div>
        <div class="count-down-second">{{countDown.second}}</div>
      </div>
    </template>
    <div v-if="postLable" class="post-count-down-text">{{postLable}}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue'
const TIMESTAMPOFDAY = 24 * 60 * 60

export default defineComponent({
  name: 'DriverSupportCountDown',
  props: {
    type: {
      type: String
    },
    lable: {
      type: String
    },
    timeGap: {
      type: Number,
      default: 0
    },
    postLable: {
      type: String
    }
  },
  setup(props, ctx) {
    let countDownGap = props.timeGap || 0
    const countDown = ref({
      day: '0',
      hour: '00',
      minute: '00',
      second: '00'
    })
    let countDownHandler = 0

    const lableText = computed(() => props.lable || '')
    const showDesc = computed(() => props.type === 'full' && lableText)
    const notSimple = computed(() => props.type !== 'simple')
    const showSimple = computed(() => props.type === 'simple')
    const prefixTime = (time) => {
      if (time < 10) {
        return `0${time}`
      }
      return `${time}`
    }
    const updateCountDown = () => {
      if (countDownGap < 0) {
        ctx.emit('update')
        stopCountDown()
        return
      }
      const dayNum = parseInt(countDownGap / TIMESTAMPOFDAY + '', 10)
      const hourNum = parseInt((countDownGap / 3600) % 24 + '', 10)
      const minuteNum = parseInt((countDownGap / 60) % 60 + '', 10)
      const secondNum = parseInt(countDownGap % 60 + '', 10)
      countDown.value = {
        day: dayNum + '',
        hour: prefixTime(hourNum), // 60*60
        minute: prefixTime(minuteNum), // 60
        second: prefixTime(secondNum)
      }
      countDownGap -= 1
    }
    const startCountDown = () => {
      if (!countDownGap || countDownGap <= 0) return
      if (countDownHandler) {
        stopCountDown()
      }
      updateCountDown()
      countDownHandler = window.setInterval(() => {
        updateCountDown()
      }, 1000)
    }
    startCountDown()

    const stopCountDown = () => {
      if (countDownHandler) {
        clearInterval(countDownHandler)
        countDownHandler = 0
      }
    }
    watch(() => props.timeGap, () => {
      countDownGap = props.timeGap
      startCountDown()
    })

    onBeforeUnmount(() => {
      stopCountDown()
    })
    return {
      showDesc,
      lableText,
      notSimple,
      showSimple,
      countDown
    }
  }
})
</script>

<style lang="stylus">
.count-down-wrap
  display: flex
  align-items: center
  justify-content: center
  margin-bottom: 10px !important
  color: black
  font-weight: 400;
  font-size: 13px
  font-family: PingFangSC-Regular
  line-height: 17px
  letter-spacing: 0
.count-down-text, .count-down-time
  color: black
  font-weight: 400
  font-family: PingFangSC-Regular
  letter-spacing: 0
  white-space: nowrap
.count-down-time
  display: flex
  align-items: center
  justify-content: flex-start
  font-weight: 400;
  font-family: PingFangSC-Regular
  letter-spacing: 0
.full .count-down-text, .count-down-dot
  font-weight: 400
  font-family: PingFangSC-Regular
  line-height: 17px;
  letter-spacing: 0
.count-down-day, .count-down-hour, .count-down-minute, .count-down-second
  margin: 0 4px
  color: black
  font-weight: 400
  font-family: PingFangSC-Regular
  // font-weight bold
  line-height: 1
  letter-spacing: 0
  text-align: center
  border-radius: 2px
</style>