使用day.js让时间 (显示为几分钟前 几小时前 几天前 几个月前 )

效果图

代码

utils.ts

通过引入utils.ts

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime); // 相对时间
dayjs.locale('zh-cn'); // 使用本地化语言
// 需要安装cnpm i dayjs --save 
/*
 * @param time 时间字符串
 * @param friendly 显示xxx时间前 (显示为几分钟前 几小时前 几天前 几个月前 )
 */
 export function getLastTimeStr(time: string, friendly: boolean) {
    if (friendly) {
      return dayjs(time).fromNow().replace(' ', '');
    }
    return dayjs(new Date(time)).format('YYYY-MM-DD HH:mm');
  }

main.js

import dayjs from 'dayjs'
app.config.globalProperties.day=dayjs

使用的页面

import {getLastTimeStr} from '../utils/utils'//引入
 setup() {
const data = reactive({

 getLastTimeStr(time: string, friendly: boolean) {
      return getLastTimeStr(time, friendly);
    },
})
}

 <div>{{getLastTimeStr(item.create_at, true)}}</div>