更新记录

1.0.0（2026-09-09）

• 首次发布
• 支持传入 list 数组渲染进度时间线
• 节点圆心与 trackTypeDesc 标题水平对齐
• 左侧连接线贯通节点、无空隙
• trackTime / locationAddress / images / remark 有值才显示

平台兼容性

uni-app(5.21)

uni-app x(3.8.3)

time-line

通用进度时间线组件。只需传入 list 数组；节点圆心与标题水平对齐，左侧连线贯通无空隙；字段有值才显示。

效果截图

引入方式

方式一：插件市场导入（推荐）

1. 在 DCloud 插件市场 搜索 time-line
2. 选择「使用 HBuilderX 导入插件」到你的 uni-app 项目
3. 插件会安装到 uni_modules/time-line

uni_modules + easycom 下无需手动 import，直接使用：

<template>
  <time-line :list="timelineList" />
</template>

若 easycom 未生效，可在 pages.json 增加：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^time-line$": "@/uni_modules/time-line/components/time-line/time-line.vue"
    }
  }
}

方式二：手动拷贝 uni_modules

将本插件目录 time-line 复制到项目的：

项目根目录/uni_modules/time-line/

或（vite / cli 常见结构）：

src/uni_modules/time-line/

然后同样通过 easycom 标签使用。

Props

list 单项字段

可复制用法

<template>
  <view class="page">
    <time-line :list="timelineList" />
  </view>
</template>

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

const timelineList = ref([
  {
    images: [],
    locationAddress: null,
    remark: null,
    trackTime: '2025-07-14 10:20:11',
    trackType: 0,
    trackTypeDesc: '已下单'
  },
  {
    images: ['/static/placeholder.png'],
    locationAddress: '示例市示例区示例路 100 号',
    remark: null,
    trackTime: '2025-07-14 11:31:23',
    trackType: 1,
    trackTypeDesc: '已发货'
  },
  {
    images: [],
    locationAddress: null,
    remark: null,
    trackTime: '',
    trackType: null,
    trackTypeDesc: '已完成'
  }
]);
</script>

示例工程

配套示例工程：time-line-demo（本仓库外层示例项目）

用 HBuilderX 打开该工程，运行到浏览器或微信开发者工具即可预览。

发布插件时：

1. 右键 uni_modules/time-line → 发布到插件市场
2. 在弹窗中勾选上传示例工程（选择示例工程根目录）

注意事项

• Vue3 组件（<script setup>）
• 静态资源已内置在插件 static/，无业务路径依赖
• 未完成节点：保留 trackTypeDesc，将 trackType 置为 null 即可显示灰色样式