封装vue倒计时组件，方便大家参考。

组件代码封装，这里面startTime格式是YYYY-MM-DD， endTime格式是YYYY-MM-DD
<template>
  <div class="countDownClass">
    <span>{{countDownText}}</span>
    <span>
      <span>{{hhssmm.hou}}</span>
      <span>:</span>
      <span>{{hhssmm.min}}</span>
      <span>:</span>
      <span>{{hhssmm.sec}}</span>
    </span>

  </div>
</template>

<script>

  import moment from 'moment'

  export default {
    name: "CountDown",
    props: {
      startTime: {
        type: String,
        required: true,
      },
      endTime: {
        type: String,
        required: true,
      }
    },
    data() {
      return {
        countDownText: '',
        hhssmm:{},
      }
    },
    computed: {
    },
    async created() {
      this.updateState();
      this.timeInterval=setInterval(()=>{
        this.updateState()
      },1000)
    },
    updated(){
      if(this.end||this.done){
        clearInterval(this.timeInterval)
      }
    },
    methods: {

      /**
       * 时间小于10补零
       * */
      timeFormat(param) {
        return param < 10 ? "0" + param : param;
      },

      /**
       * 时间格式化HHmmss
       * */
      formateHHmmss(time){
        let day = parseInt(time /1000 / (60 * 60 * 24));
        let hou = parseInt((time  /1000 % (60 * 60 * 24)) / 3600) + day * 24;
        let min = parseInt(((time /1000  % (60 * 60 * 24)) % 3600) / 60);
        let sec = parseInt(((time /1000 % (60 * 60 * 24)) % 3600) % 60);
        let HHmmss = {
          hou: this.timeFormat(hou),
          min: this.timeFormat(min),
          sec: this.timeFormat(sec)
        };
        return HHmmss;
      },

      /**
       * 更新倒计时状态
       */
      updateState() {
        console.log(this.startTime);

        let starTime = new Date(moment(this.startTime).format("YYYY/MM/DD HH:mm:ss")).getTime();
        console.log(moment(this.startTime).format("YYYY/MM/DD HH:mm:ss"))
        let endTime = new Date(moment(this.endTime).format("YYYY/MM/DD HH:mm:ss")).getTime();
        var test = new Date(endTime);
        //console.log(test.getFullYear() + "-" + this.timeFormat(test.getMonth()) + "-" + this.timeFormat(test.getDate()) + " " + this.timeFormat(test.getHours()) + ":" + this.timeFormat(test.getMinutes()) + ":" + this.timeFormat(test.getSeconds()))
        let nowTime = new Date().getTime();
        let beginTime = starTime - nowTime;
        let finishTime = endTime - nowTime;
        let hhmmss = null;
        if (beginTime >= 0) {
          let hou = this.formateHHmmss(beginTime).hou;
          let min = this.formateHHmmss(beginTime).min;
          let sec = this.formateHHmmss(beginTime).sec;
          hhmmss = {
            hou: hou,
            min: min,
            sec: sec
          };
          this.hhssmm = hhmmss;
          this.start=true;
          this.countDownText="秒杀已开始";
        } else if (finishTime >= 0) {
          let hou = this.formateHHmmss(finishTime).hou;
          let min = this.formateHHmmss(finishTime).min;
          let sec = this.formateHHmmss(finishTime).sec;
          hhmmss = {
            hou: hou,
            min: min,
            sec: sec
          };
          this.hhssmm = hhmmss;
          this.countDownText=`距离活动结束`;
        } else {
          hhmmss = {
            hou: "00",
            min: "00",
            sec: "00"
          };
          this.end=true;
          this.countDownText="活动已结束";
        }
      }
    },
    beforeDestroy() {
      clearInterval(this.timeInterval)
    }
  }
</script>

<style scoped>
  /* 秒杀 */
  .countDownClass {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 0 0 0.1rem 0;
    color: #fd286f;
  }
  .countDownClass > span:last-child {
    margin-left: 0.1rem;
  }
  .countDownClass > span:last-child span:nth-child(odd) {
    color: #fff;
    font-weight: bold;
    display: inline-block;
    border-radius: 0.1rem;
    background-color: #fd286f;
    padding: 0.05rem 0.05rem 0.05rem 0.05rem;
  }
</style>

 

组件引入方式

<CountDown :startTime="YYYY-MM-DD" :endTime="YYYY-MM-DD"></CountDown>