时间格式化神器：智能显示相对时间

根据你的需求，我们需要实现一个时间格式化函数，能够将时间戳或日期字符串转换为相对时间显示（如"几分钟前"、"昨天"等）。以下是解决方案：

小于1小时：显示"x分钟前"

今天内：显示"x小时前"

昨天：显示"昨天"

更早：显示完整日期

技术选型：

使用Day.js处理日期

需要计算时间差和日期比较

实现方案：

安装Day.js

bash 复制代码

npm install dayjs

创建时间格式化工具函数

typescript 复制代码

// utils/dateFormat.js
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn' // 如果需要中文显示

dayjs.extend(relativeTime)
dayjs.locale('zh-cn') // 设置中文

export function formatRelativeTime(date) {
  const now = dayjs()
  const target = dayjs(date)
  const diffInMinutes = now.diff(target, 'minute')
  const diffInHours = now.diff(target, 'hour')
  const diffInDays = now.diff(target, 'day')

  if (diffInMinutes < 60) {
    return `${diffInMinutes}分钟前`
  } else if (diffInDays < 1) {
    return `${diffInHours}小时前`
  } else if (diffInDays === 1) {
    return '昨天'
  } else if (diffInDays === 2) {
    return '前天'
  } else if (diffInDays < 7) {
    return `${diffInDays}天前`
  } else {
    return target.format('YYYY-MM-DD')
  }
}

在Vue组件中使用
修改你的index.vue文件：

typescript 复制代码

<script setup>
import { formatRelativeTime } from '@/utils/dateFormat'

const list = ref([
  // 你的数据列表
  { created_at: '2023-07-20 10:00:00' },
  { created_at: '2023-07-21 15:30:00' },
  { created_at: new Date() } // 当前时间
])
</script>

<template>
  <div v-for="item in list" :key="item.id">
    <!-- 使用格式化函数 -->
    <span>{{ formatRelativeTime(item.created_at) }}</span>
  </div>
</template>

高级优化版本（支持多种格式）

typescript 复制代码

// utils/dateFormat.js
export function smartFormat(date, options = {}) {
  const now = dayjs()
  const target = dayjs(date)
  const diff = {
    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.minutes < 1) {
    return '刚刚'
  } else if (diff.minutes < 60) {
    return `${diff.minutes}分钟前`
  } else if (diff.hours < 24 && target.isSame(now, 'day')) {
    return `${diff.hours}小时前`
  } else if (diff.days === 1 || (diff.days < 2 && !target.isSame(now, 'day'))) {
    return '昨天 ' + target.format('HH:mm')
  } else if (diff.days < 7) {
    return `${diff.days}天前`
  } else if (diff.weeks < 4) {
    return `${diff.weeks}周前`
  } else {
    return target.format(options.format || 'YYYY-MM-DD HH:mm')
  }
}

使用示例

typescript 复制代码

<script setup>
import { smartFormat } from '@/utils/dateFormat'

// 使用不同格式
console.log(smartFormat('2023-07-20')) // "3周前"
console.log(smartFormat(new Date(), { format: 'MM-DD' })) // "07-23"
</script>

关键点说明：

时区处理：Day.js默认使用本地时区

性能优化：避免在模板中频繁创建Day.js实例

国际化：可以通过更改locale支持多语言

边界情况：处理了"刚刚"、"前天"等特殊情况