Timeline 时间轴

时间轴组件用于按时间顺序可视化展示事件或流程。

基础用法

通过 items 属性配置数据，包含标题、描述、时间戳和图标。

vue

<TTimeline :items="items" />

简洁模式

设置 simple 启用简洁样式变体。

vue

<TTimeline :items="items" simple />

加载中状态

通过 pending 在末尾显示加载状态节点。

vue

<TTimeline :items="items" pending="加载中..." />

自定义内容

通过 TTimelineItem 子组件和 default 插槽自定义复杂内容。

vue

<TTimeline>
  <TTimelineItem title="..." timestamp="..." color="green" :icon="IconCheck">
    <p>自定义内容</p>
  </TTimelineItem>
</TTimeline>

API

TTimeline Props

Prop	说明	类型	默认值
`items`	配置式数据	`TimelineItemData[]`	—
`simple`	简洁样式变体	`boolean`	`false`
`pending`	末尾加载节点	`boolean \| string`	`false`
`reverse`	倒序排列	`boolean`	`false`
`empty-text`	空数据提示	`string`	`'暂无数据'`

TTimelineItem Props

Prop	说明	类型	默认值
`timestamp`	时间戳文字	`string`	—
`title`	标题	`string`	—
`description`	描述文字	`string`	—
`color`	图标点颜色	`string`	—
`icon`	自定义图标	`Component`	—
`hollow`	空心头像/点	`boolean`	`false`
`loading`	加载中状态	`boolean`	`false`

Slots

插槽	作用域	说明
`default`	—	自定义项内容
`dot`	`{ item }`	自定义图标点
`timestamp`	—	自定义时间戳（仅 TTimelineItem）
`empty`	—	空数据状态（仅 TTimeline）