<NuxtTime>
<NuxtTime> 组件允许你以语言环境友好的格式显示日期和时间，并遵循正确的 <time> HTML 语义。它确保服务器和客户端之间渲染一致，且不会出现水合不匹配的情况。
¥The <NuxtTime> component lets you display dates and times in a locale-friendly format with proper <time> HTML semantics. It ensures consistent rendering between server and client without hydration mismatches.
用法
¥Usage
你可以在应用的任何位置使用 <NuxtTime> 组件：
¥You can use the <NuxtTime> component anywhere in your app:
<template>
<NuxtTime :datetime="Date.now()" />
</template>
Props
datetime
- 类型：
Date | number | string - 必需：
true
要显示的日期和时间值。你可以提供：
¥The date and time value to display. You can provide:
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'）：
¥The BCP 47 language tag for formatting (e.g., 'en-US', 'fr-FR', 'ja-JP'):
<template>
<NuxtTime :datetime="Date.now()" locale="fr-FR" />
</template>
格式化属性
¥Formatting Props
该组件接受 Intl.DateTimeFormat 选项中的任何属性：
¥The component accepts any property from the Intl.DateTimeFormat options:
<template>
<NuxtTime
:datetime="Date.now()"
year="numeric"
month="long"
day="numeric"
hour="2-digit"
minute="2-digit"
/>
</template>
这将输出如下内容："2025 年 4 月 22 日 上午 8:30"
¥This would output something like: "April 22, 2025, 08:30 AM"
relative
- 类型：
boolean - 必需：
false - 默认：
false
使用 Intl.RelativeTimeFormat API 启用相对时间格式：
¥Enables relative time formatting using the Intl.RelativeTimeFormat API:
<template>
<!-- Shows something like "5 minutes ago" -->
<NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
</template>
相对时间格式化属性
¥Relative Time Formatting Props
当 relative 设置为 true 时，该组件还接受来自 Intl.RelativeTimeFormat 的属性：
¥When relative is set to true, the component also accepts properties from Intl.RelativeTimeFormat:
<template>
<NuxtTime
:datetime="Date.now() - 3 * 24 * 60 * 60 * 1000"
relative
numeric="auto"
style="long"
/>
</template>
这将输出如下内容："3 天前" 或 "上周五" 取决于 numeric 模块的设置。
¥This would output something like: "3 days ago" or "last Friday" depending on the numeric setting.
示例
¥Examples
基本用法
¥Basic Usage
<template>
<NuxtTime :datetime="Date.now()" />
</template>
自定义格式
¥Custom Formatting
<template>
<NuxtTime
:datetime="Date.now()"
weekday="long"
year="numeric"
month="short"
day="numeric"
hour="numeric"
minute="numeric"
second="numeric"
timeZoneName="short"
/>
</template>
相对时间
¥Relative Time
<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>
使用自定义语言环境
¥With Custom Locale
<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>