Timeline 时间线
用于展示时间顺序的信息流。
基础用法
通过 items 传入时间线数据，每项可包含 title、content、time 字段。
创建项目
项目已成功创建
2024-01-01 10:00
代码提交
提交了第一个版本
2024-01-02 14:30
发布上线
正式版本发布
2024-01-05 09:00
不同类型
通过 type 字段设置节点颜色类型：default / primary / success / warning / danger。
默认节点
默认样式
主要节点
主题色
成功节点
成功状态
警告节点
警告状态
危险节点
危险状态
带图标节点
通过 icon 字段指定内置图标名称，节点圆点将显示为图标。
项目创建
初始化仓库
2024-01-01
构建成功
CI 流水线通过
2024-01-02
问题警告
存在潜在风险
2024-01-03
构建失败
紧急修复
2024-01-04
正式发布
部署到生产环境
2024-01-05
交替展现
设置 mode='alternate'，时间线左右交替排列，time 显示在对面。
09:00
需求评审
与产品经理确认需求细则
11:30
UI 设计
完成交互与视觉稿
14:00
前端开发
组件开发与联调
16:00
测试验收
功能与回归测试
18:30
发布上线
灰度发布并全量推送
右侧模式
设置 mode='right'，时间线内容显示在右侧，time 显示在更右侧。
10:00
提交代码
feat: 新增用户模块
12:00
代码审查
已通过 Review
14:00
合并分支
merge into main
幽灵节点
设置 pending 显示未完成节点，字符串值可自定义提示文字。
步骤一
已完成
2024-01-01
步骤二
已完成
2024-01-02
步骤三
进行中
2024-01-03
加载中...
倒序排列
设置 reverse 将时间线倒序展现。
第三步
开发实现
2024-01-10
第二步
方案设计
2024-01-05
第一步
需求分析
2024-01-01
水平方向
设置 direction='horizontal'，时间线水平排列。
需求
需求分析
01-01
设计
方案设计
01-05
开发
编写代码
01-10
测试
质量验收
01-15
上线
部署发布
01-20
自定义圆点
通过 dot 字段传入 HTML 字符串作为自定义圆点。
1
版本发布 v1.0
首个正式版本
2024-01-01
2
版本发布 v2.0
重大功能更新
2024-06-01
3
版本发布 v3.0
架构全面升级
2024-12-01
事件回调
点击时间线项目时触发 select 事件。
点击我
这是第一条
点击我
这是第二条
点击我
这是第三条
选中：未选中
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | TimelineItem[] | — | 时间线数据（必填） |
mode | 'left' | 'right' | 'alternate' | 'left' | 布局模式，alternate 为左右交替 |
direction | 'vertical' | 'horizontal' | 'vertical' | 方向 |
pending | boolean | string | false | 是否显示幽灵节点，字符串值作为节点文案 |
pendingTime | string | '' | 幽灵节点的时间标签 |
reverse | boolean | false | 是否倒序排列 |
labelPosition | 'bottom' | 'same' | 'bottom' | 时间标签位置（仅在 mode=left 时生效） |
TimelineItem
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 标题 |
content | string | — | 描述内容 |
time | string | — | 时间标签 |
type | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'default' | 节点颜色类型 |
icon | string | — | 内置图标名称（iconfont font_class） |
dot | string | VNode | — | 自定义圆点（HTML 字符串或 VNode） |