发布于
最后编辑
<script setup lang="ts">
import { Stack, Text, Time } from '@hina-ui/vue'
const published = new Date('2026-03-14T09:30:00+08:00')
const edited = new Date(Date.now() - 12 * 60 * 1000)
</script>
<template>
<Stack class="max-w-sm">
<Text>
发布于
<Time :value="published" />
</Text>
<Text tone="muted">
最后编辑
<Time :value="edited" format="relative" />
</Text>
</Stack>
</template>
vue
用法
import { Time } from '@hina-ui/vue'
ts
value 接受时间字符串、时间戳或者 Date。组件渲染为原生的 time，datetime 属性写入 ISO 格式，显示文本按当前语言排版。
<script setup lang="ts">
import { Time } from '@hina-ui/vue'
</script>
<template>
<Time value="2026-03-14T09:30:00+08:00" />
</template>
vue
示例
格式
共四档。datetime 同时显示日期与时刻，date 与 time 各取其一，relative 显示相对现在的时间。
- datetime
- date
- time
- relative
<script setup lang="ts">
import { DescriptionDetails, DescriptionList, DescriptionTerm, Time } from '@hina-ui/vue'
const value = '2026-03-14T09:30:00+08:00'
</script>
<template>
<DescriptionList class="grid max-w-sm grid-cols-[6rem_1fr] gap-y-2 [&>dd]:m-0! [&>dt]:m-0!">
<DescriptionTerm>datetime</DescriptionTerm>
<DescriptionDetails><Time :value="value" /></DescriptionDetails>
<DescriptionTerm>date</DescriptionTerm>
<DescriptionDetails><Time :value="value" format="date" /></DescriptionDetails>
<DescriptionTerm>time</DescriptionTerm>
<DescriptionDetails><Time :value="value" format="time" /></DescriptionDetails>
<DescriptionTerm>relative</DescriptionTerm>
<DescriptionDetails><Time :value="value" format="relative" /></DescriptionDetails>
</DescriptionList>
</template>
vue
相对时间
45 秒以内显示为“刚刚”，更早或更晚按秒、分、时、天、周、月、年逐级换算。措辞取当前语言的自然说法，例如两天之后显示为“后天”。
页面打开期间每 30 秒刷新一次，无需手动更新。在 TooltipProvider 内，指针悬停会通过 Tooltip 显示完整的日期与时刻；tooltip 设为 false 可以关闭。
10 秒前：
3 分钟前：
5 小时前：
2 天后：
<script setup lang="ts">
import { Stack, Text, Time } from '@hina-ui/vue'
const now = Date.now()
const items = [
{ label: '10 秒前', value: now - 10 * 1000 },
{ label: '3 分钟前', value: now - 3 * 60 * 1000 },
{ label: '5 小时前', value: now - 5 * 60 * 60 * 1000 },
{ label: '2 天后', value: now + 2 * 24 * 60 * 60 * 1000 },
]
</script>
<template>
<Stack class="max-w-sm" gap="xs">
<Text v-for="item in items" :key="item.label" size="sm">
{{ item.label }}：
<Time :value="item.value" format="relative" />
</Text>
</Stack>
</template>
vue
随语言变化
日期的顺序、月份的写法与相对时间的措辞都跟随 provideUiLocale 提供的语言。
简体中文：
English：
<script setup lang="ts">
import { Stack, Text, Time, enUS, provideUiLocale } from '@hina-ui/vue'
import { defineComponent, h } from 'vue'
const value = '2026-03-14T09:30:00+08:00'
const English = defineComponent({
setup(_, { slots }) {
provideUiLocale(enUS)
return () => h('span', slots.default?.())
},
})
</script>
<template>
<Stack class="max-w-sm">
<Text>
简体中文：
<Time :value="value" />
</Text>
<Text>
English：
<English><Time :value="value" /></English>
</Text>
</Stack>
</template>
vue
无法解析的值
value 为空或者无法解析时显示“未知时间”，并且改为渲染 span，不会输出错误的 datetime。开发环境下会输出告警。
值为 null： 未知时间
无法解析： 未知时间
<script setup lang="ts">
import { Stack, Text, Time } from '@hina-ui/vue'
</script>
<template>
<Stack class="max-w-sm">
<Text>
值为 null：
<Time :value="null" />
</Text>
<Text>
无法解析：
<Time value="昨天下午" />
</Text>
</Stack>
</template>
vue
无障碍
datetime属性始终是完整的 ISO 时间，辅助技术据此获得准确时刻。- 相对时间会随时间变化，完整时刻始终保留在
datetime中。
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | string | number | Date | null | — | 要显示的时间 |
format | 'datetime' | 'date' | 'time' | 'relative' | 'datetime' | 显示格式 |
tooltip | boolean | true | 相对时间是否用 Tooltip 显示完整时刻 |
class | string | — | 追加至根元素的类名 |