首页 > 网页制作 >TinyVue时间线组件全方位实战指南：业务演进脉络清晰

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

来源：互联网 2026-07-02 08:26:06

脉络清晰的业务演进：TinyVue Timeline 时间线组件全方位实战指南在企业级 B 端系统中，业务进度和流程演进的展示场景非常普遍，例如订单物流节点（已下单→待发货→运输中→已签收）、项目审批历史、系统审计日志、版本更新记录等。如何让枯燥的进度变得一目了然？时间线（Timeline）组件无

脉络清晰的业务演进：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>