根据你的需求我们需要实现一个时间格式化函数能够将时间戳或日期字符串转换为相对时间显示如几分钟前、“昨天等。以下是解决方案小于1小时显示x分钟前”今天内显示x小时前昨天显示昨天更早显示完整日期技术选型使用Day.js处理日期需要计算时间差和日期比较实现方案安装Day.jsnpminstalldayjs创建时间格式化工具函数// utils/dateFormat.jsimportdayjsfromdayjsimportrelativeTimefromdayjs/plugin/relativeTimeimportdayjs/locale/zh-cn// 如果需要中文显示dayjs.extend(relativeTime)dayjs.locale(zh-cn)// 设置中文exportfunctionformatRelativeTime(date){constnowdayjs()consttargetdayjs(date)constdiffInMinutesnow.diff(target,minute)constdiffInHoursnow.diff(target,hour)constdiffInDaysnow.diff(target,day)if(diffInMinutes60){return${diffInMinutes}分钟前}elseif(diffInDays1){return${diffInHours}小时前}elseif(diffInDays1){return昨天}elseif(diffInDays2){return前天}elseif(diffInDays7){return${diffInDays}天前}else{returntarget.format(YYYY-MM-DD)}}在Vue组件中使用修改你的index.vue文件script setupimport{formatRelativeTime}from/utils/dateFormatconstlistref([// 你的数据列表{created_at:2023-07-20 10:00:00},{created_at:2023-07-21 15:30:00},{created_at:newDate()}// 当前时间])/scripttemplatediv v-foritem in list:keyitem.id!--使用格式化函数--span{{formatRelativeTime(item.created_at)}}/span/div/template高级优化版本支持多种格式// utils/dateFormat.jsexportfunctionsmartFormat(date,options{}){constnowdayjs()consttargetdayjs(date)constdiff{minutes:now.diff(target,minute),hours:now.diff(target,hour),days:now.diff(target,day),weeks:now.diff(target,week),months:now.diff(target,month)}if(diff.minutes1){return刚刚}elseif(diff.minutes60){return${diff.minutes}分钟前}elseif(diff.hours24target.isSame(now,day)){return${diff.hours}小时前}elseif(diff.days1||(diff.days2!target.isSame(now,day))){return昨天 target.format(HH:mm)}elseif(diff.days7){return${diff.days}天前}elseif(diff.weeks4){return${diff.weeks}周前}else{returntarget.format(options.format||YYYY-MM-DD HH:mm)}}使用示例script setupimport{smartFormat}from/utils/dateFormat// 使用不同格式console.log(smartFormat(2023-07-20))// 3周前console.log(smartFormat(newDate(),{format:MM-DD}))// 07-23/script关键点说明时区处理Day.js默认使用本地时区性能优化避免在模板中频繁创建Day.js实例国际化可以通过更改locale支持多语言边界情况处理了刚刚、前天等特殊情况