TinyVue时间线组件全方位实战指南：业务演进脉络清晰

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——让流程轨迹在用户眼前优雅呈现，提升整体的信息获取效率。