封装时间工具类刚刚，几分钟前，几小时前，昨天，日期

项目中的需求之后写的一个时间封装

效果图：
几小时前

日期显示

实现步骤

步骤1：把这个js封装在工具util中 我命名为 date.js

export function formatMsgTime (timespan) {
	// 因为我接口得到的数据是 日期的格式，所有先转为了时间戳
    // 2021-01-28 18:34:28 改为时间戳
    let thisTime = timespan;
    thisTime = thisTime.replace(/-/g, '/');
    let time = new Date(thisTime);
    time = time.getTime();  // 此时的time就是为时间戳格式
	
    var dateTime = new Date(time) // 将传进来的字符串或者毫秒转为标准时间
    var year = dateTime.getFullYear()
    var month = dateTime.getMonth() + 1
    var day = dateTime.getDate()
    var hour = dateTime.getHours()
    var minute = dateTime.getMinutes()
    // var second = dateTime.getSeconds()
    var millisecond = dateTime.getTime() // 将当前编辑的时间转换为毫秒
    var now = new Date() // 获取本机当前的时间
    var nowNew = now.getTime() // 将本机的时间转换为毫秒
    var milliseconds = 0
    var timeSpanStr
    milliseconds = nowNew - millisecond
    if (milliseconds <= 1000 * 60 * 1) { // 小于一分钟展示为刚刚
      timeSpanStr = '刚刚'
    } else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) { // 大于一分钟小于一小时展示为分钟
      timeSpanStr = Math.round((milliseconds / (1000 * 60))) + '分钟前'
    } else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) { // 大于一小时小于一天展示为小时
      timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前'
    } else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 3) { // 大于一天小于等于三天展示位天
      timeSpanStr =  '昨天' + hour + ':' + minute // 第二天，显示昨天 xx:xx
    } else {  // 显示 2021.10.29 14:00
      timeSpanStr = year + '.' + month + '.' + day + ' ' + hour + ':' + minute
    }
    return timeSpanStr
  }

步骤2：页面引入

import * as formatMsg from '@/util/date';

步骤3：可能在多个位置使用 写成一个方法

getday(date){
      return formatMsg.formatMsgTime(date)
    }

步骤4：在需要的页面写这个方法

<p class="date_time">{{ getday(item.createTime) }}</p>

好了，这就是我效果的代码，希望能帮助到你们，加油