<NuxtTime>

源文件
<NuxtTime> 组件以本地友好的格式显示时间，并具有服务器-客户端一致性。
此组件在 Nuxt v3.17+ 中可用。

<NuxtTime> 组件让您以本地友好的格式显示日期和时间，并具有正确的 <time> HTML 语义。它确保服务器和客户端之间的一致渲染，而不会出现水合不匹配。

使用

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

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

属性

日期时间

  • 类型：Date | number | string
  • 必填：true

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

  • 一个 Date 对象
  • 一个时间戳（数字）
  • 一个 ISO 格式的日期字符串
<template>
  <NuxtTime :datetime="Date.now()" />
  <NuxtTime :datetime="new Date()" />
  <NuxtTime datetime="2023-06-15T09:30:00.000Z" />
</template>

区域设置

  • 类型：string
  • 必填：false
  • 默认：使用浏览器或服务器的默认区域设置

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

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

格式化属性

该组件接受来自Intl.DateTimeFormatoptions

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

这将输出类似“2025 年 4 月 22 日，上午 08:30”的内容。

相对时间

  • 类型：boolean
  • 必填：false
  • 默认值：false

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

<template>
  <!-- Shows something like "5 minutes ago" -->
  <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"
    time-zone-name="short"
  />
</template>

相对时间

<template>
  <div>
    <p>
      <NuxtTime
        :datetime="Date.now() - 30 * 1000"
        relative
      />
      <!-- 30 seconds ago -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() - 45 * 60 * 1000"
        relative
      />
      <!-- 45 minutes ago -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000"
        relative
      />
      <!-- in 2 days -->
    </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>