<NuxtTime>
<NuxtTime> 组件以符合本地习惯的格式显示时间,并确保服务器端与客户端渲染一致。
该组件在 Nuxt v3.17+ 可用。
<NuxtTime>
组件允许你以符合本地习惯的格式显示日期和时间,同时具备合适的 <time>
HTML 语义。它确保服务器端和客户端渲染一致,避免 hydration 不匹配。
用法
你可以在应用中任何地方使用 <NuxtTime>
组件:
<template>
<NuxtTime :datetime="Date.now()" />
</template>
Props
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
- 非必填
- 默认: 使用浏览器或服务器的默认语言环境
用于格式化的 BCP 47 语言标签(例如 'en-US'、'fr-FR'、'ja-JP'):
<template>
<NuxtTime :datetime="Date.now()" locale="fr-FR" />
</template>
格式化 Props
组件支持所有来自 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”(2025年4月22日,上午08:30)
relative
- 类型:
boolean
- 非必填
- 默认:
false
启用基于 Intl.RelativeTimeFormat API 的相对时间格式:
<template>
<!-- 显示类似“5分钟前” -->
<NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
</template>
相对时间格式化 Props
当 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>