vue 实现当前时间到结束时间倒计时

首先封装一个方法，创建文件夹utils，在utils创建pluginUtil.js

var pluginUtil = {}

pluginUtil.install = function (Vue) {

  // Array.prototype.gRemove = function(val) {
  //   var index = this.indexOf(val);
  //   if (index > -1) {
  //   this.splice(index, 1);
  //   }
  //   };

  Vue.prototype.$gUtil = new (function () {
   
    // 获取当前时间
    this.getTimeNow = function () {
      return new Date();
    }
   
    //计算两个时间的差值
    this.getDiffT1Now = function(t1){
      var date1= t1;  //开始时间
      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)
      return days+'天'+hours+'时'+minutes+'分'+seconds+'秒';
    }
    //比较大小，返回最小的值
   this.compareAndS = function(a,b){
      if(a>b){
        return b;
      }else{
        return a;
      }
   }
  })()
}

export default pluginUtil

vue中使用方法

1、html

<div >{{details.end_time}} </div>
 <div class="center-text-time">
   <i class="el-icon-message-solid"></i>
   于<span> {{details.time1}} </span>后可再次手动更新
 </div>

data() {
   return {
    	details:{
      	end_time:'2021-05-20 15:00:00', //结束时间自定义
    	}
    };
},
mounted() {
   this.selectEventPlanList()
   this.timer = setInterval(() => {
     if (this.tableData.length > 0) {
       this.tableData.forEach(item => {
         if (item.state == 0) {
           this.$set(item, 'time1', this.$gUtil.getDiffT1Now(item.end_time))
         }

       });
     }
   }, 1000);
 },
 destroyed() {
   clearInterval(this.timer)
 }