时间线

TuiTimeline 用于按时间顺序展示事件流。 它支持 垂直 (Vertical) 和 水平 (Horizontal) 两种布局，可以通过配置数组快速生成，也可以通过插槽实现高度自定义的内容。

基础用法

数据驱动渲染 (Options)

最简单的用法是通过 options 属性传入事件数组。 数组项需包含 timestamp (时间戳) 和 content (内容)。

<script setup>
import { ref } from 'vue';

const activities = ref([
  { timestamp: '2024-01-20', content: '创建项目', type: 'primary', hollow: true },
  { timestamp: '2024-01-21', content: '通过审核', color: '#0bbd87' },
  { timestamp: '2024-01-22', content: '活动按期开始', size: 'large' },
  { timestamp: '2024-01-23', content: '默认样式的节点' }
]);
</script>

<template>
  <TuiTimeline :options="activities" />
</template>

插槽自定义渲染 (Slot)

使用 <TuiTimelineItem> 子组件可以灵活控制每个节点的内容。

<template>
  <TuiTimeline>
    <TuiTimelineItem timestamp="2024-04-01" type="primary">
      <h3>创建成功</h3>
      <p>用户 admin 创建了仓库</p>
    </TuiTimelineItem>
    <TuiTimelineItem timestamp="2024-04-03" icon="tui-icon ti-upload" color="green">
      <p>上传了新版本</p>
    </TuiTimelineItem>
  </TuiTimeline>
</template>

布局方向

水平时间线 (Horizontal)

设置 direction="horizontal" 即可切换为水平布局。

• timestampPlacement: 控制时间戳的位置，默认为 'bottom'，可选 'top'。

<template>
  <TuiTimeline direction="horizontal" :options="activities" />

  <TuiTimeline 
    direction="horizontal" 
    timestampPlacement="top" 
    :options="activities" 
  />
</template>

节点样式定制

TuiTimeline 提供了丰富的属性来装饰节点：

• type: 语义化颜色 (primary, success, warning, danger, info)。
• color: 自定义颜色值（十六进制）。
• icon: 自定义图标类名。
• hollow: 是否显示为空心圆点。
• size: 节点尺寸 (large, default, small)。

<script setup>
const customItems = [
  { 
    content: '空心节点', 
    timestamp: '2024-01-01', 
    hollow: true, 
    type: 'primary' 
  },
  { 
    content: '自定义图标', 
    timestamp: '2024-01-02', 
    icon: 'tui-icon ti-star', 
    size: 'large', 
    type: 'warning' 
  },
  { 
    content: '危险操作', 
    timestamp: '2024-01-03', 
    type: 'danger', 
    size: 'small' 
  }
];
</script>

<template>
  <TuiTimeline :options="customItems" />
</template>

API 参考

TuiTimeline Props

属性名	类型	默认值	说明
options	Array	[]	数据源，数组项包含 timestamp 和 content。
direction	String	'vertical'	时间线方向。可选：vertical, horizontal。
timestampPlacement	String	'bottom'	时间戳位置。可选：top, bottom。
lines	Number	2	内容文本最大显示行数，超出省略。
maxWidth	Number	-	内容区域的最大宽度 (px)。
maxLine	Number	-	(功能同 lines) 最大行数限制。

TuiTimelineItem Props

属性名	类型	默认值	说明
timestamp	String	-	时间戳文本。
hideTimestamp	Boolean	false	是否隐藏时间戳。
type	String	-	节点类型。可选：primary, success, warning, danger, info。
color	String	-	节点颜色。
icon	String	-	自定义图标类名。
size	String	'default'	节点尺寸。可选：large, default, small。
hollow	Boolean	false	是否为空心节点。

TuiTimelineItem Slots

插槽名	说明
default	自定义节点内容。
dot	自定义轴点的内容。