vue计算时间差，并使用vant组件实现定时器

1.对时间的处理，有时需要对时间进行差值计算

//  计算倒计时
handle_calTime(endTime){
    //计算两个时间的差值
    var date1= endTime;  //开始时间
    var date2 = new Date();    //结束时间
    var date3 = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数  
    date3 = Math.abs(date3)

    //计算出相差天数
    var days=Math.floor(date3/(24*3600*1000))

    //计算出小时数
    var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
    var hours=Math.floor(leave1/(3600*1000))

    //计算相差分钟数
    var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
    var minutes=Math.floor(leave2/(60*1000))

    //计算相差秒数
    var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
    var seconds=Math.round(leave3/1000)

    // console.log(days+'天'+hours+'时'+minutes+'分'+seconds+'秒')

     // 时间换成成毫秒
    let totalMilliseconds = (days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds) * 1000
    return totalMilliseconds
},

2.使用vant组件实现计时器引入：

import Vue from 'vue';
import { CountDown } from 'vant';
Vue.use(CountDown);

3.使用

  <p class="tip">优惠倒计时</p>
  <van-count-down :time="time">
      <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
      </template>
  </van-count-down>
  
  export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
    };
  },
};