<NuxtTime> 组件允许您以符合本地化的格式显示日期和时间，并具有适当的 <time> HTML 语义。它确保服务器和客户端之间的一致渲染，没有水合不匹配。

用法

您可以在应用程序中的任何地方使用 <NuxtTime> 组件：

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

属性

datetime

• 类型: Date | number | string
• 必需: true

要显示的日期和时间值。您可以提供：

• 一个 Date 对象
• 一个时间戳（数字）
• 一个 ISO 格式的日期字符串

<template>
  <NuxtTime :datetime="Date.now()" />
  <NuxtTime :datetime="new Date()" />
  <NuxtTime datetime="2023-06-15T09:30:00.000Z" />
</template>

locale

• 类型: string
• 必需: false
• 默认: 使用浏览器或服务器的默认语言环境

用于格式化的 BCP 47 语言标签（例如，'en-US'，'fr-FR'，'ja-JP'）：

<template>
  <NuxtTime :datetime="Date.now()" locale="fr-FR" />
</template>

格式化属性

组件接受来自 Intl.DateTimeFormat 选项的任何属性：

<template>
  <NuxtTime 
    :datetime="Date.now()" 
    year="numeric"
    month="long"
    day="numeric"
    hour="2-digit"
    minute="2-digit"
  />
</template>

这将输出类似于："April 22, 2025, 08:30 AM"

relative

• 类型: boolean
• 必需: false
• 默认: false

使用 Intl.RelativeTimeFormat API 启用相对时间格式化：

<template>
  <!-- 显示类似 "5 分钟前" -->
  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
</template>

相对时间格式化属性

当 relative 设置为 true 时，组件还接受来自 Intl.RelativeTimeFormat 的属性：

<template>
  <NuxtTime 
    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000" 
    relative 
    numeric="auto"
    style="long"
  />
</template>

这将输出类似于："3 天前" 或 "上周五"，具体取决于 numeric 设置。

示例

基本用法

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

自定义格式化

<template>
  <NuxtTime 
    :datetime="Date.now()" 
    weekday="long"
    year="numeric"
    month="short"
    day="numeric"
    hour="numeric"
    minute="numeric"
    second="numeric"
    timeZoneName="short"
  />
</template>

相对时间

<template>
  <div>
    <p>
      <NuxtTime :datetime="Date.now() - 30 * 1000" relative />
      <!-- 30 秒前 -->
    </p>
    <p>  
      <NuxtTime :datetime="Date.now() - 45 * 60 * 1000" relative />
      <!-- 45 分钟前 -->
    </p>
    <p>
      <NuxtTime :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000" relative />
      <!-- 2 天后 -->
    </p>
  </div>
</template>

使用自定义语言环境

<template>
  <div>
    <NuxtTime :datetime="Date.now()" locale="en-US" weekday="long" />
    <NuxtTime :datetime="Date.now()" locale="fr-FR" weekday="long" />
    <NuxtTime :datetime="Date.now()" locale="ja-JP" weekday="long" />
  </div>
</template>