<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>