TinyVue Timeline 时间线组件全方位实战指南：打造脉络清晰的企业级业务演进图
在企业级 B 端系统中，业务进度与流程演进的展示频率极高：从订单物流节点（已下单→待发货→运输中→已签收），到项目审批历史、系统审计日志、版本更新记录，几乎无处不在。如何让这些枯燥的进度变得一目了然？时间线（Timeline）组件无疑是最佳载体。本文基于 OpenTiny 的企业级前端组件库 TinyVue，深入拆解其 Timeline 时间线组件 的高阶实战玩法，助你轻松搭建出脉络清晰的流程演进图，提升用户对业务轨迹的感知效率。
一、 快速上手：构建一条基础时间线
基础用法简单直观：引入 TinyTimeLine，传入数据即可完成渲染，无需额外配置。
基础代码示例
复制代码<template>
<div class="demo-timeline">
<tiny-time-line :data="timelineData" :active="activeNode" @click="handleNodeClick">tiny-time-line>
div>
template><script setup>
import { ref } from 'vue'
import { TimeLine as TinyTimeLine, Modal as TinyModal } from '@opentiny/vue'// active 属性定义当前高亮的节点索引（0-indexed）
const activeNode = ref(1)const timelineData = ref([
{ name: '提交申请', time: '2026-06-25 10:00:00' },
{ name: '部门主管审批', time: '2026-06-25 14:30:00' },
{ name: 'HR 终审', time: '2026-06-26 09:00:00' },
{ name: '流程结束', time: '2026-06-26 12:00:00' }
])const handleNodeClick = (index, node) => {
TinyModal.message({ message: `你点击了第 ${index + 1} 个节点: ${node.name}`, status: 'info' })
}
script>
通过 :data 和 :active 两个属性，一条横向时间线即可快速渲染，@click 事件还能轻松捕获每个节点的点击行为。整个初始化过程十分简洁，让开发者能立刻开始流程展示。
二、 竖向时间线与逆序展示：适配更多场景
当内容增多时，横向时间线容易显得拥挤——尤其在移动端场景下。此时竖向时间线成为更舒适的阅读选择。
TinyVue Timeline 提供 vertical 属性轻松切换为竖向布局。此外，如果希望最新事件置于最顶部（例如日志流），开启 reverse 属性即可实现数据逆序排列，无需手动处理数组顺序。
复制代码<tiny-time-line
:data="timelineData"
:active="activeNode"
vertical
reverse>
tiny-time-line>
仅需几个属性即可灵活调整展示逻辑，让时间线的方向与顺序完全匹配业务需求，极大减少了重复工作。
三、 高级实战：自定义字段映射，无缝对接后端数据
真实业务中，后端返回的字段往往不是固定的 name 和 time，可能是 title、createdAt 等命名。若每次都需手动循环映射，开发效率会大打折扣。
TinyVue Timeline 提供直接字段映射机制，支持以下属性：
name-field：指定节点名称对应的字段名time-field：指定节点时间对应的字段名auto-color-field：指定节点图标状态或颜色对应的字段名
示例代码
复制代码<template>
<tiny-time-line
:data="backendData"
name-field="title"
time-field="createdAt"
auto-color-field="statusColor">
tiny-time-line>
template><script setup>
import { ref } from 'vue'
import { TimeLine as TinyTimeLine } from '@opentiny/vue'const backendData = ref([
{ title: '创建工单', createdAt: '10:00', statusColor: 'success' },
{ title: '处理工单', createdAt: '11:30', statusColor: 'error' }
])
script>
通过字段映射，组件能无缝适配任意后端接口，真正实现了低耦合、高复用的开发模式。
四、 插槽（Slot）的高级应用：双向混排与深度定制
当节点内容不仅仅是简单文字，而是需要带上标签、头像甚至操作按钮时，插槽功能便派上用场。
横向时间线提供了 top 和 bottom 插槽，允许自由定制节点顶部与底部内容。竖向时间线则提供 left 和 right 插槽，实现左右布局的自定义。
复杂混排效果示例
复制代码<template>
<tiny-time-line :data="timelineData" vertical>
<template #right="{ slotScope }">
<div class="custom-content">
<h3>{{ slotScope.name }}h3>
<p class="desc">经办人：张三p>
<span class="badge" v-if="slotScope.time">{{ slotScope.time }}span>
div>
template>
tiny-time-line>
template>
借助插槽，传统时间线的展示范式被彻底打破——审批流表单、附件列表、操作按钮等复杂交互内容均可优雅嵌入，创造出更具信息层次感的业务时间线。
五、 细粒度节点控制：使用 TimelineItem 实现差异化定制
当需要对某些节点的交互、图标做完全差异化的定义时，data 数据驱动，每个节点都能拥有自己独立的内容结构和样式。
复制代码<template>
<tiny-time-line>
<tiny-timeline-item v-for="(item, i) in timelineData" :key="i" :node="item" :nodeIndex="i">
<template #description>
<div class="special-desc" v-if="i === 1">这是需要特殊标红的审核说明！div>
template>
tiny-timeline-item>
tiny-time-line>
template>
这种细粒度控制方式，让时间线组件在面对复杂业务逻辑时依然保持灵活，每个节点都可独立定制，满足高标准的交互需求。
六、 总结
TinyVue Timeline 组件虽然轻量，但在自适应排版、字段自定义映射、插槽定制等方面提供了极强的拓展能力，完全能够支撑大中型 B 端系统中的流程与轨迹展示需求。无论是订单物流、审批流转还是日志审计，TinyVue Timeline 都能让业务脉络清晰呈现。
如果你的系统中也需要一条清晰优雅的业务演进线，不妨试试 TinyVue Timeline——让流程轨迹在用户眼前优雅呈现，提升整体的信息获取效率。
