NUR

主题

Timeline 时间线 ​

可视化地呈现时间流信息，支持多种布局模式和自定义样式。

基础用法 ​

默认 left 模式，节点在左侧，内容在右侧的卡片中。

2026-07-28
项目立项
完成需求评审与技术方案设计
2026-08-05
第一阶段开发
完成核心功能模块开发与单元测试
2026-08-20
第二阶段开发
完成辅助功能与前后端联调
2026-09-01
测试与上线
通过集成测试，正式发布 v1.0
vue
<my-timeline :items="items" />

const items = [
  { timestamp: '2026-07-28', title: '项目立项', content: '完成需求评审与技术方案设计' },
  { timestamp: '2026-08-05', title: '第一阶段开发', content: '完成核心功能模块开发' },
  { timestamp: '2026-09-01', title: '测试与上线', content: '通过集成测试，正式发布 v1.0' },
]

右侧模式 ​

mode="right" 将节点放在右侧，内容放在左侧。

2026-07-28
项目立项
完成需求评审与技术方案设计
2026-08-05
第一阶段开发
完成核心功能模块开发与单元测试
2026-08-20
第二阶段开发
完成辅助功能与前后端联调
2026-09-01
测试与上线
通过集成测试，正式发布 v1.0
vue
<my-timeline :items="items" mode="right" />

交替模式 ​

mode="alternate" 让节点左右交替排布，适合空间较宽的展示场景。

2026
公司成立
在北京中关村创立，初始团队 5 人
2027
A 轮融资
获得知名风投 5000 万 A 轮投资
2028
产品发布
核心产品正式发布，首月用户突破 10 万
2029
B 轮融资
完成 2 亿 B 轮融资，团队扩张至 200 人
2030
国际化
进入海外市场，覆盖 30+ 国家和地区
vue
<my-timeline :items="items" mode="alternate" />

反向排序 ​

reverse 属性反转时间线顺序，从最新到最旧排列。

排列：正序|倒序
2026-07-28
项目立项
完成需求评审与技术方案设计
2026-08-05
第一阶段开发
完成核心功能模块开发与单元测试
2026-08-20
第二阶段开发
完成辅助功能与前后端联调
2026-09-01
测试与上线
通过集成测试，正式发布 v1.0
vue
<my-timeline :items="items" reverse />

自定义节点颜色 ​

通过 item.color 为每个节点设置独立颜色。

09:30
提交订单
订单已提交，等待商家确认
10:15
商家接单
商家已确认订单，正在备货
11:00
骑手取货
骑手已到达商家取货
11:45
正在配送
骑手正在配送途中，请保持电话畅通
12:20
已签收
订单已签收，感谢您的购买
vue
const items = [
  { timestamp: '09:30', title: '提交订单', content: '...', color: '#67c23a' },
  { timestamp: '10:15', title: '商家接单', content: '...' },
  { timestamp: '11:00', title: '骑手取货', content: '...', color: '#e6a23c' },
]

自定义时间戳 ​

通过 #timestamp 插槽自定义时间戳的渲染内容。

2026-07-28 最新
项目立项
完成需求评审与技术方案设计
2026-08-05
第一阶段开发
完成核心功能模块开发与单元测试
2026-08-20
第二阶段开发
完成辅助功能与前后端联调
2026-09-01
测试与上线
通过集成测试，正式发布 v1.0
vue
<my-timeline :items="items">
  <template #timestamp="{ item, index }">
    <span>
      <svg>...</svg>
      {{ item.timestamp }}
      <span v-if="index === 0">最新</span>
    </span>
  </template>
</my-timeline>

组件结构 ​

根元素 .my-timeline 包含多个 .my-timeline__item，每个时间线条目由节点区（圆点 + 连接线）和内容卡片（时间戳、标题、描述）组成，通过 .is-left / .is-right 控制布局方向。

CSS 类名 ​

类名说明
.my-timeline根元素
.my-timeline--left左侧模式
.my-timeline--right右侧模式
.my-timeline--alternate交替模式
.my-timeline__item时间线条目
.my-timeline__item.is-left左对齐布局
.my-timeline__item.is-right右对齐布局
.my-timeline__node节点区域（圆点 + 连接线容器）
.my-timeline__dot圆点
.my-timeline__line连接线
.my-timeline__card内容卡片
.my-timeline__timestamp时间戳文字
.my-timeline__title标题文字
.my-timeline__desc描述文字
.my-timeline__spacer交替模式占位块

API ​

Timeline Props ​

属性说明类型默认值
items时间线列表TimelineItem[][]
mode排列模式'left' | 'right' | 'alternate''left'
reverse反向排序（从新到旧）booleanfalse

Timeline Slots ​

名称说明作用域
dot自定义节点内容{ item, index }
timestamp自定义时间戳{ item, index }

TimelineItem ​

ts
interface TimelineItem {
  title: string
  timestamp?: string
  content?: string
  color?: string    // 节点颜色
}