Timeline 时间轴

按照时间顺序展示事件、操作记录、流程进度。

时间轴是用于对一系列信息进行时间排序时，垂直展示的组件。

何时使用

当需要按照时间顺序展示事件、操作记录、流程进度时。
当需要呈现一系列发生时间关联的信息时。

导入

import { Timeline, TimelineItem } from "@reglow/reui";

代码演示

基础用法

<script setup>
import { Timeline, TimelineItem } from "@reglow/reui";
</script>

<template>
  <Timeline>
    <TimelineItem time="2024-01-14 10:35">第一个节点内容</TimelineItem>
    <TimelineItem time="2024-01-13 16:17">第二个节点内容</TimelineItem>
    <TimelineItem time="2024-01-12 18:34">第三个节点内容</TimelineItem>
  </Timeline>
</template>

节点类型

通过 type 设置节点类型，可选 default、ongoing、success、warning、error。

<template>
  <Timeline>
    <TimelineItem time="2024-01-14 10:35" type="ongoing">审核中</TimelineItem>
    <TimelineItem time="2024-01-13 16:17" type="success">发布成功</TimelineItem>
    <TimelineItem time="2024-01-12 18:34" type="warning">警告信息</TimelineItem>
    <TimelineItem time="2024-01-11 09:00" type="error">审核失败</TimelineItem>
  </Timeline>
</template>

样式变体

通过 variant 设置节点样式，可选 filled（实心圆点，默认）、outlined（空心描边圆点）。Timeline 上的 variant 会透传给所有子项，TimelineItem 也可单独覆盖。

<template>
  <!-- 空心描边圆点 -->
  <Timeline variant="outlined">
    <TimelineItem time="2024-01-14" type="success">已完成</TimelineItem>
    <TimelineItem time="2024-01-13" type="warning">进行中</TimelineItem>
    <TimelineItem time="2024-01-12" type="error">已失败</TimelineItem>
  </Timeline>

  <!-- 子项可覆盖父级 variant -->
  <Timeline variant="outlined">
    <TimelineItem time="2024-01-14" variant="filled">实心节点</TimelineItem>
    <TimelineItem time="2024-01-13">空心节点</TimelineItem>
  </Timeline>
</template>

自定义节点

通过 dot 自定义图标，color 自定义圆点色值。

<script setup>
import { h } from "vue";
import { AlertTriangle } from "lucide-vue-next";
</script>

<template>
  <Timeline>
    <TimelineItem time="2024-01-14 10:35">默认样式的节点</TimelineItem>
    <TimelineItem time="2024-01-13 16:17" :dot="h(AlertTriangle)" type="warning">
      自定义图标
    </TimelineItem>
    <TimelineItem time="2024-01-12 18:34" color="pink">自定义节点颜色</TimelineItem>
    <TimelineItem time="2024-01-11 12:20">
      <span class="text-base font-medium">自定义节点样式</span>
    </TimelineItem>
  </Timeline>
</template>

辅助内容

通过 extra 添加辅助说明。

<template>
  <Timeline>
    <TimelineItem time="2024-01-14 10:35" extra="节点辅助说明信息">
      第一个节点内容
    </TimelineItem>
    <TimelineItem time="2024-01-13 16:17" extra="节点辅助说明信息">
      第二个节点内容
    </TimelineItem>
  </Timeline>
</template>

时间轴位置

通过 mode 设置时间轴和内容的相对位置，可选 left、right、center、alternate。

<!-- 左侧（默认） -->
<Timeline mode="left">
  <TimelineItem time="2024-01-14" extra="说明">内容</TimelineItem>
</Timeline>

<!-- 右侧 -->
<Timeline mode="right">
  <TimelineItem time="2024-01-14" extra="说明">内容</TimelineItem>
</Timeline>

<!-- 居中 -->
<Timeline mode="center">
  <TimelineItem time="2024-01-14" extra="说明">内容</TimelineItem>
</Timeline>

<!-- 交替展现 -->
<Timeline mode="alternate">
  <TimelineItem time="2024-01-14" extra="说明">第一个节点</TimelineItem>
  <TimelineItem time="2024-01-13" extra="说明">第二个节点</TimelineItem>
  <TimelineItem time="2024-01-12" extra="说明">第三个节点</TimelineItem>
  <TimelineItem time="2024-01-11" extra="说明">第四个节点</TimelineItem>
</Timeline>

自定义节点位置

通过 position 覆盖父级 mode 设置的节点位置。

<Timeline mode="alternate">
  <TimelineItem time="2024-01-14">默认位置</TimelineItem>
  <TimelineItem time="2024-01-13" position="left">强制左侧</TimelineItem>
  <TimelineItem time="2024-01-12" position="right">强制右侧</TimelineItem>
</Timeline>

使用 dataSource

通过 dataSource 数据源方式渲染。

<script setup>
const dataSource = [
  {
    time: "2024-01-14 10:35",
    extra: "节点辅助说明信息",
    content: "第一个节点内容",
    type: "ongoing",
  },
  {
    time: "2024-01-13 16:17",
    extra: "节点辅助说明信息",
    content: "第二个节点内容",
    color: "pink",
  },
  {
    time: "2024-01-12 18:34",
    extra: "节点辅助说明信息",
    content: "第三个节点内容",
    type: "warning",
  },
];
</script>

<template>
  <Timeline mode="alternate" :data-source="dataSource" />
</template>

点击事件

<script setup>
const onClick = (e) => {
  console.log("点击了节点", e);
};
</script>

<template>
  <Timeline>
    <TimelineItem time="2024-01-14" @click="onClick">点击我</TimelineItem>
  </Timeline>
</template>

API

Timeline Props

参数	说明	类型	默认值
mode	时间轴位置模式	`left \| right \| center \| alternate`	`left`
variant	样式变体（透传给子项）	`filled \| outlined`	`filled`
dataSource	数据源	`TimelineItemData[]`	`[]`
class	附加类名	`string`	-

TimelineItem Props

参数	说明	类型	默认值
time	时间文本	`string`	-
type	节点类型	`default \| ongoing \| success \| warning \| error`	`default`
color	自定义圆圈色值	`string`	-
dot	自定义时间轴点	`VNode`	-
extra	自定义辅助内容	`VNode \| string`	-
position	节点位置（覆盖父级 mode）	`left \| right`	-
variant	样式变体（覆盖父级）	`filled \| outlined`	继承父级
class	附加类名	`string`	-

TimelineItem Events

事件	说明	回调参数
click	点击节点	`(e: MouseEvent)`

TimelineItemData

参数	说明	类型
time	时间文本	`string`
type	节点类型	`TimelineItemType`
color	自定义圆圈色值	`string`
dot	自定义时间轴点	`VNode`
extra	自定义辅助内容	`VNode \| string`
position	节点位置	`left \| right`
variant	样式变体	`filled \| outlined`
content	节点内容	`VNode \| string`

节点类型对照

type	说明	颜色
`default`	默认	primary
`ongoing`	进行中	primary
`success`	成功	green
`warning`	警告	yellow
`error`	错误	red

位置模式对照

mode	说明
`left`	时间轴在左侧，内容在右侧（默认）
`right`	时间轴在右侧，内容在左侧
`center`	时间轴居中，内容在右侧
`alternate`	时间轴居中，内容交替显示在左右两侧

Tag 标签

Tooltip 文字提示

悬停时显示的文字提示气泡

内容锚点

何时使用
导入
代码演示
API