BizTimeText 时间文本

时间展示标准件（相对 / 绝对 / 实时时钟三模式合一）：clock 模式——当前时刻秒级走字（顶栏时钟 / 大屏时间牌），模板语法同 absolute、支持时区与「星期X」后缀；relative 模式——刚刚 / N 分钟前 / N 小时前 / 昨天 HH:mm / 前天 / MM-DD / YYYY-MM-DD 分档自适应，可配间隔自动刷新，悬停 title 显示绝对时间；absolute 模式——时间戳 / 字符串 / Date 统一模板格式化（YYYY-MM-DD HH:mm 等任意组合）、空值与非法值占位、时区偏移口径、可选「昨天 HH:mm」。适用于消息 / 评论 / 操作日志时间列、表格时间统一口径、详情页字段、导出前回显。

相对模式基础

30 秒前 · 刚刚

8 分钟前 · 8 分钟前

3 小时前 · 3 小时前

当日内三档分档展示（默认 mode='relative'）。

<script setup lang="ts">
/** 相对模式基础：刚刚 / N 分钟前 / N 小时前 当日三档 */
import { BizTimeText } from 'vue3-ep-biz-lib'

const now = Date.now()
const points = [
  { label: '30 秒前', ts: now - 30_000 },
  { label: '8 分钟前', ts: now - 8 * 60_000 },
  { label: '3 小时前', ts: now - 3 * 3_600_000 },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 6px">
    <p v-for="p in points" :key="p.label" style="margin: 0; font-size: 13px">
      {{ p.label }} · <BizTimeText :time="p.ts" />
    </p>
  </div>
</template>

显示代码

相对跨天 / 跨年

昨天 · 昨天 15:08

前天 · 前天 15:08

今年 3 月 · 03-15

去年 11 月 · 2025-11-20

昨天 / 前天带 HH:mm；本年 MM-DD、跨年 YYYY-MM-DD。

<script setup lang="ts">
/** 相对模式跨天/跨年：昨天 / 前天 HH:mm、本年 MM-DD、跨年 YYYY-MM-DD */
import { BizTimeText } from 'vue3-ep-biz-lib'

const now = Date.now()
const now2 = new Date()
const points = [
  { label: '昨天', ts: now - 26 * 3_600_000 },
  { label: '前天', ts: now - 50 * 3_600_000 },
  { label: '今年 3 月', ts: new Date(now2.getFullYear(), 2, 15).getTime() },
  { label: '去年 11 月', ts: new Date(now2.getFullYear() - 1, 10, 20).getTime() },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 6px">
    <p v-for="p in points" :key="p.label" style="margin: 0; font-size: 13px">
      {{ p.label }} · <BizTimeText :time="p.ts" />
    </p>
  </div>
</template>

显示代码

自动刷新控制

自动刷新：刚刚定格：刚刚

interval=5000 每 5 秒重算文案（观察「55 秒前」跨档）；interval=0 定格省心跳。

<script setup lang="ts">
/** 自动刷新控制：interval=5000 每隔 5 秒跨档；interval=0 定格（静态报表省心跳） */
import { ref } from 'vue'
import { BizTimeText } from 'vue3-ep-biz-lib'

const ts = ref(Date.now() - 55_000)
</script>

<template>
  <div style="display: flex; gap: 20px; font-size: 13px">
    <span>自动刷新：<BizTimeText :time="ts" :interval="5000" /></span>
    <span>定格：<BizTimeText :time="ts" :interval="0" /></span>
  </div>
</template>

显示代码

相对分档阈值

默认口径 30 秒前：刚刚

放宽口径 3 分钟前：刚刚

thresholds.just-now 放宽到 5 分钟：3 分钟前也显示「刚刚」。

<script setup lang="ts">
/** 自定义分档阈值：justNow 放宽到 5 分钟，3 分钟前也显示「刚刚」 */
import { BizTimeText } from 'vue3-ep-biz-lib'

const now = Date.now()
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 6px; font-size: 13px">
    <p style="margin: 0">默认口径 30 秒前：<BizTimeText :time="now - 30_000" /></p>
    <p style="margin: 0">放宽口径 3 分钟前：<BizTimeText :time="now - 3 * 60_000" :thresholds="{ justNow: 300_000 }" /></p>
  </div>
</template>

显示代码

悬浮绝对时间

悬停看绝对时间：1 分钟前关闭 tooltip：1 分钟前

relative 模式 title 悬停可见完整时间点；tooltip=false 关闭。

<script setup lang="ts">
/** 悬浮绝对时间：relative 模式 title 悬停可见完整时间点；tooltip=false 关闭 */
import { BizTimeText } from 'vue3-ep-biz-lib'

const ts = Date.now() - 90_000
</script>

<template>
  <div style="display: flex; gap: 16px; font-size: 13px">
    <span>悬停看绝对时间：<BizTimeText :time="ts" /></span>
    <span>关闭 tooltip：<BizTimeText :time="ts" :tooltip="false" /></span>
  </div>
</template>

显示代码

绝对模式基础

2026-10-26 17:08

默认模板 YYYY-MM-DD HH:mm 统一口径。

<script setup lang="ts">
/** 绝对模式基础：默认模板 'YYYY-MM-DD HH:mm' 统一口径 */
import { BizTimeText } from 'vue3-ep-biz-lib'

const ts = Date.now()
</script>

<template>
  <span><BizTimeText mode="absolute" :time="ts" /></span>
</template>

显示代码

绝对多模板

2026-10-26（仅日期）

2026-10-26 17:53:22（含秒）

2026/10/26 17:53（斜杠）

17:53（时分）

仅日期 / 含秒 / 斜杠 / 时分粒度同一时间点对比。

<script setup lang="ts">
/** 绝对模式多模板：仅日期 / 含秒 / 斜杠 / 时分粒度 */
import { BizTimeText } from 'vue3-ep-biz-lib'

const ts = Date.now() + 45 * 60_000
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 6px; font-size: 13px">
    <p style="margin: 0"><BizTimeText mode="absolute" :time="ts" format="YYYY-MM-DD" />（仅日期）</p>
    <p style="margin: 0"><BizTimeText mode="absolute" :time="ts" format="YYYY-MM-DD HH:mm:ss" />（含秒）</p>
    <p style="margin: 0"><BizTimeText mode="absolute" :time="ts" format="YYYY/MM/DD HH:mm" />（斜杠）</p>
    <p style="margin: 0"><BizTimeText mode="absolute" :time="ts" format="HH:mm" />（时分）</p>
  </div>
</template>

显示代码

绝对时区口径

北京时间：2026-10-27 00:30

伦敦时间：2026-10-26 16:30

同一 UTC 时刻按北京（+8）与伦敦（0）渲染墙钟时间。

<script setup lang="ts">
/** 绝对模式时区口径：同一 UTC 时刻按北京（+8）/ 伦敦（0）渲染墙钟时间 */
import { BizTimeText } from 'vue3-ep-biz-lib'

const ts = Date.UTC(2026, 9, 26, 16, 30)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 6px; font-size: 13px">
    <p style="margin: 0">北京时间：<BizTimeText mode="absolute" :time="ts" :timezone-offset="480" format="YYYY-MM-DD HH:mm" /></p>
    <p style="margin: 0">伦敦时间：<BizTimeText mode="absolute" :time="ts" :timezone-offset="0" format="YYYY-MM-DD HH:mm" /></p>
  </div>
</template>

显示代码

绝对昨天档

默认：10-25 15:08开昨天：昨天 15:08

show-yesterday 开启后昨天的 HH:mm 显示为「昨天 HH:mm」。

<script setup lang="ts">
/** 绝对模式昨天档：show-yesterday 开启后昨天的 HH:mm 显示为「昨天 HH:mm」 */
import { BizTimeText } from 'vue3-ep-biz-lib'

const now = Date.now()
</script>

<template>
  <div style="display: flex; gap: 16px; font-size: 13px">
    <span>默认：<BizTimeText mode="absolute" :time="now - 26 * 3_600_000" format="MM-DD HH:mm" /></span>
    <span>开昨天：<BizTimeText mode="absolute" :time="now - 26 * 3_600_000" format="MM-DD HH:mm" show-yesterday /></span>
  </div>
</template>

显示代码

空值兜底

相对空值：—绝对脏值：未记录

双模式空值 / 脏数据统一占位（placeholder 可配）。

<script setup lang="ts">
/** 空值 / 非法值兜底：双模式统一渲染占位（placeholder 可配），脏数据不炸整表 */
import { BizTimeText } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; gap: 16px; font-size: 13px">
    <span>相对空值：<BizTimeText time="" /></span>
    <span>绝对脏值：<BizTimeText mode="absolute" time="oops" placeholder="未记录" /></span>
  </div>
</template>

显示代码

入参兼容

数字时间戳：5 分钟前

ISO 字符串：—

Date 对象：刚刚

绝对模式 Date：17:08:22

时间戳 / ISO 字符串 / Date 三形态 × 双模式同一解析口径。

<script setup lang="ts">
/** 入参兼容：时间戳 / ISO 字符串 / Date 三形态 × 双模式同一解析口径 */
import { BizTimeText } from 'vue3-ep-biz-lib'

const ts = Date.now() - 5 * 60_000
const str = new Date(Date.now() - 2 * 3_600_000).toISOString()
const date = new Date()
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 6px; font-size: 13px">
    <p style="margin: 0">数字时间戳：<BizTimeText :time="ts" /></p>
    <p style="margin: 0">ISO 字符串：<BizTimeText :time="str" /></p>
    <p style="margin: 0">Date 对象：<BizTimeText :time="date" /></p>
    <p style="margin: 0">绝对模式 Date：<BizTimeText mode="absolute" :time="date" format="HH:mm:ss" /></p>
  </div>
</template>

显示代码

表格组合场景

相对列（「多久前」）+ 绝对列（统一口径）同表组合，空值占位不炸整表。

<script setup lang="ts">
/** 表格场景：相对列（操作日志「多久前」）+ 绝对列（发生时间统一口径）同表组合 */
import { ElTable, ElTableColumn } from 'element-plus'
import { BizTimeText } from 'vue3-ep-biz-lib'

const now = Date.now()
const rows = [
  { id: 1, name: '下单', ts: now - 6 * 60_000 },
  { id: 2, name: '支付', ts: now - 3 * 3_600_000 },
  { id: 3, name: '同步失败（无时间）', ts: '' },
]
</script>

<template>
  <ElTable :data="rows" size="small" style="width: 100%">
    <ElTableColumn prop="id" label="序号" width="60" />
    <ElTableColumn prop="name" label="节点" min-width="120" />
    <ElTableColumn label="距此刻" width="130">
      <template #default="{ row }"><BizTimeText :time="row.ts" /></template>
    </ElTableColumn>
    <ElTableColumn label="发生时间" width="180">
      <template #default="{ row }"><BizTimeText mode="absolute" :time="row.ts" /></template>
    </ElTableColumn>
  </ElTable>
</template>

显示代码

实时时钟基础

当前时刻：

17:08:22

mode="clock" 无需传 time，默认模板 HH:mm:ss，每秒重算（可观察到秒位走字）。

mode="clock" 无需传 time，默认模板 HH:mm:ss 每秒走字。

<script setup lang="ts">
/** 场景：clock 实时时钟——当前时刻秒级走字 */
import { BizTimeText } from 'vue3-ep-biz-lib'
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-space>当前时刻：<BizTimeText mode="clock" /></el-space>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      mode="clock" 无需传 time，默认模板 <code>HH:mm:ss</code>，每秒重算（可观察到秒位走字）。
    </p>
  </el-space>
</template>

显示代码

时钟格式与星期

仅时间：

17:08

日期时间：

2026年10月26日 17:08:22

带星期：

2026-10-26 17:08:22 星期一

模板语法与 absolute 一致（YYYY / MM / DD / HH / mm / ss）；show-week 追加「星期X」。

模板语法与 absolute 一致；show-week 追加「星期X」，大屏时间牌常用「日期 + 星期」组合。

<script setup lang="ts">
/** 场景：含日期与星期——日期时间 + 星期X 后缀（大屏时间牌常用格式） */
import { BizTimeText } from 'vue3-ep-biz-lib'
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-space>仅时间：<BizTimeText mode="clock" format="HH:mm" /></el-space>
    <el-space>日期时间：<BizTimeText mode="clock" format="YYYY年MM月DD日 HH:mm:ss" /></el-space>
    <el-space>带星期：<BizTimeText mode="clock" format="YYYY-MM-DD HH:mm:ss" show-week /></el-space>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      模板语法与 absolute 一致（YYYY / MM / DD / HH / mm / ss）；show-week 追加「星期X」。
    </p>
  </el-space>
</template>

显示代码

多时区时钟

北京：

2026-10-26 17:08:22

伦敦：

2026-10-26 09:08:22

纽约：

2026-10-26 04:08:22

时区口径与 absolute 一致（东正西负，分钟）；跨时区团队协作页 / 全球运维大屏常用。

timezone-offset 口径下北京 / 伦敦 / 纽约三表并排——跨时区协作页与全球运维大屏。

<script setup lang="ts">
/** 场景：多时区时钟——timezone-offset 口径下的北京 / 伦敦 / 纽约三表并排 */
import { BizTimeText } from 'vue3-ep-biz-lib'
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-space>北京：<BizTimeText mode="clock" format="YYYY-MM-DD HH:mm:ss" :timezone-offset="480" /></el-space>
    <el-space>伦敦：<BizTimeText mode="clock" format="YYYY-MM-DD HH:mm:ss" :timezone-offset="0" /></el-space>
    <el-space>纽约：<BizTimeText mode="clock" format="YYYY-MM-DD HH:mm:ss" :timezone-offset="-300" /></el-space>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      时区口径与 absolute 一致（东正西负，分钟）；跨时区团队协作页 / 全球运维大屏常用。
    </p>
  </el-space>
</template>

显示代码

时钟刷新间隔

秒级（默认）：

17:08:22

分钟级（interval=60000）：

2026-10-26 17:08

定格（interval=0）：

17:08

缺省秒级走字；大列表 / 低功耗场景用 interval 提升粒度，interval=0 定格不再起定时器。

缺省秒级；interval 提升粒度（分钟级省心跳），interval=0 定格关闭定时器。

<script setup lang="ts">
/** 场景：刷新间隔控制——分钟级时钟省心跳（列表页大量时钟场景节流） */
import { BizTimeText } from 'vue3-ep-biz-lib'
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-space>秒级（默认）：<BizTimeText mode="clock" /></el-space>
    <el-space>分钟级（interval=60000）：<BizTimeText mode="clock" format="YYYY-MM-DD HH:mm" :interval="60000" /></el-space>
    <el-space>定格（interval=0）：<BizTimeText mode="clock" format="HH:mm" :interval="0" /></el-space>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      缺省秒级走字；大列表 / 低功耗场景用 interval 提升粒度，interval=0 定格不再起定时器。
    </p>
  </el-space>
</template>

显示代码

大屏时间牌

17:08:222026年10月26日 星期一

大字号 + 日期星期分行的数据大屏顶部时间牌（字号 / 颜色随 attrs.class 与 style 定制）。

<script setup lang="ts">
/** 场景：大屏时间牌——大字号 + 日期星期分行的数据大屏顶部时间牌 */
import { BizTimeText } from 'vue3-ep-biz-lib'
</script>

<template>
  <div
    style="
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 24px 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, #0c1b3a, #12305e);
      color: #eaf2ff;
      font-variant-numeric: tabular-nums;
    "
  >
    <BizTimeText
      mode="clock"
      format="HH:mm:ss"
      style="font-size: 44px; font-weight: 700; letter-spacing: 4px; color: #7db8ff"
    />
    <BizTimeText mode="clock" format="YYYY年MM月DD日" show-week style="font-size: 15px; opacity: 0.85" />
  </div>
</template>

显示代码

顶栏时钟集成

云枢工作台10月26日 17:08 星期一张

管理后台顶栏右侧：实时时钟 + 星期 + 头像的标准组合。

<script setup lang="ts">
/** 场景：顶栏集成——系统页头右侧实时时钟 + 星期（管理后台顶栏常用） */
import { Bell, Fold, Search } from '@element-plus/icons-vue'
import { BizTimeText } from 'vue3-ep-biz-lib'
</script>

<template>
  <div
    style="
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 16px;
      height: 48px;
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 6px;
      background: var(--el-bg-color);
      width: 620px;
    "
  >
    <el-icon style="color: var(--el-text-color-secondary)"><Fold /></el-icon>
    <span style="font-weight: 600">云枢工作台</span>
    <span style="flex: 1" />
    <el-icon style="color: var(--el-text-color-secondary)"><Search /></el-icon>
    <el-icon style="color: var(--el-text-color-secondary)"><Bell /></el-icon>
    <span style="color: var(--el-border-color); height: 16px; border-left: 1px solid var(--el-border-color)" />
    <BizTimeText mode="clock" format="MM月DD日 HH:mm" show-week style="font-size: 13px; color: var(--el-text-color-regular)" />
    <el-avatar :size="28">张</el-avatar>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
mode	'relative' | 'absolute' | 'clock'	'relative'	展示模式：relative 相对时间 / absolute 绝对时间 / clock 实时时钟
time	string | number | Date	—	时间点（数字按毫秒时间戳解析；clock 模式无需传）
interval	number	按模式 60000 / 1000	[relative / clock] 自动刷新间隔（毫秒），0 关闭（缺省 relative 分钟级、clock 秒级）
tooltip	boolean	true	[relative] 悬浮 title 显示绝对时间
thresholds	BizRelativeThresholds	—	[relative] 分档阈值覆盖（justNow / minute / hour）
format	string	按模式 'HH:mm:ss' / 'YYYY-MM-DD HH:mm'	[absolute / clock] 格式模板（YYYY / MM / DD / HH / mm / ss）
timezone-offset	number	—	[absolute / clock] 目标时区偏移（分钟，东正西负；如北京 480）
show-yesterday	boolean	false	[absolute] 昨天的 HH:mm 显示为「昨天 HH:mm」（按时区口径）
show-week	boolean	false	[clock] 文案后追加「星期X」（按时区口径）
placeholder	string	'—'	非法 / 空值占位

口径说明

• relative 分档顺序：diff ≥ 0 时依次判 刚刚（< justNow 60s）→ N 分钟前（< minute 1h）→ 当日 N 小时前 → 昨天 HH:mm → 前天 HH:mm → 本年 MM-DD → YYYY-MM-DD；未来时间跳过相对档直接按日期档展示。
• absolute 模板替换：YYYY MM DD HH mm ss 逐组替换（先长后短），不引入日期库；时区按 UTC + offset 计算墙钟，「昨天」判定同口径。
• 解析：字符串按 new Date 解析（- 分隔兼容），数字为毫秒时间戳，非法值渲染占位。
• 刷新：relative 模式按 interval 定时重算，卸载自动清理；absolute 模式不启心跳。
• clock 模式：按 effective interval 定时取 Date.now() 走字（默认秒级），星期按时区口径的墙钟日期计算；与 absolute 共用模板替换，不挂 title。