Timeline 时间轴

用于展示时间流轨迹、物流快递动态、版本日志变更或流程进度的串行时间轴组件。

---

代码示例

1. 快递物流追踪时间轴 (Express Timeline)

<template>
  <mu-timeline :items="expressList" />
</template>

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

const expressList = ref([
  {
    title: '已签收',
    content: '您的包裹已签收，感谢使用顺丰速运！',
    time: '2026-07-24 14:32',
    icon: 'check',
    dotColor: '#10B981'
  },
  {
    title: '派送中',
    content: '快递员正在派送中...',
    time: '2026-07-24 09:15',
    dotColor: '#3B82F6'
  },
  {
    title: '已发货',
    content: '商家已发货，快递已揽收',
    time: '2026-07-23 18:20'
  }
])
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
items	时间轴数据列表项数组	Array	-	[]
dotColor	统一全局节点圆点颜色	String	-	'' (首项默认高亮)
lineColor	贯穿连接线条颜色	String	-	'' (自适应暗黑模式)

---

items 节点对象属性说明

字段名	说明	类型	默认值
title	节点标题	String	-
content	节点详细描述内容	String	-
time	节点时间戳文本	String	-
icon	节点中心矢量图标	String	-
dotColor	节点专属圆点色彩	String	-

---

插槽说明 (Slots)

插槽名	说明	作用域参数
dot-${index}	自定义指定索引节点的圆点图形	-
content-${index}	自定义指定索引节点的内容描述区域	{ item: object }