Timeline 时间线

可视化地呈现时间流信息。

import { createApp } from 'vue'
import { ElTimeline, ElTimelineItem } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElTimeline)
app.use(ElTimelineItem)

基础用法

Timeline 可拆分成多个按照时间戳排列的活动，时间戳是其区分于其他控件的重要特征，使用时注意与 Steps 步骤条等区分。

自定义节点样式

可根据实际场景自定义节点尺寸、颜色，或直接使用图标。

内容框

节点内容可放入卡片等内容容器，适合展示标题、说明和处理人等信息。

图标节点

通过 icon 属性或 dot 插槽可以替换默认节点图标。

时间图标节点

当节点需要表达时间属性时，可使用时间图标替换默认圆点。

时间戳位置

通过 placement 属性设置时间戳位置，可选 top 或 bottom（默认）。

布局方式

Timeline 默认纵向布局。需要横向布局时，可基于时间线节点结构增加横向样式。

反向

使用 reverse 属性来控制节点的顺序。

API

Timeline Attributes

属性名	说明	类型	默认值
mode	时间线与内容的相对位置	enum（start / end / alternate / alternate-reverse）	start
reverse	是否反向排序节点	boolean	false

TimelineItem Attributes

属性名	说明	类型	默认值
timestamp	时间戳	string	—
hide-timestamp	是否隐藏时间戳	boolean	false
center	时间戳是否垂直居中	boolean	false
placement	时间戳位置	enum（top / bottom）	bottom
type	节点类型	enum（primary / success / warning / danger / info）	—
color	节点颜色	string	—
size	节点尺寸	enum（normal / large）	normal
icon	节点自定义图标	Component	—
hollow	是否空心节点	boolean	false

TimelineItem Slots

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

更多细节参见 Element Plus Timeline 文档。