ljs-s-timeline

ljs-s-timeline

Vue3 蛇形时间轴组件：S 形时间线布局，节点与连线样式可配置，适合流程步骤、里程碑、审批轨迹展示——数据按行折返排布，纵向省空间。

English: Vue3 snake-shaped (S-curve) timeline component — items flow in serpentine rows with curved connectors; configurable node/line styles and scoped-slot content. Ideal for process steps, milestones and approval trails.

快速开始

npm i ljs-s-timeline -S

注：样式需手动引入 import 'ljs-s-timeline/index.css'。 注：命名三处不一致——包名 ljs-s-timeline、源码目录 ljs-timeline-s、组件注册名 LjsTimelineS，模板中标签必须写 <LjsTimelineS>。

快速应用

全局注入

import 'ljs-s-timeline/index.css'; // ⚠️ 样式需手动引入
import LjsTimelineS from 'ljs-s-timeline';
app.use(LjsTimelineS);

局部注入

import LjsSTimeline from 'ljs-s-timeline';
import 'ljs-s-timeline/index.css';
// 注：产物为 default 导出，具名导入依赖 CJS 互操作、部分构建工具（如 Vite）下不可靠，请 default 导入后解构
const { LjsTimelineS } = LjsSTimeline;

TypeScript 与 AI 支持

• 自带 index.d.ts 类型声明（package.json types 字段已配置），安装后编辑器/AI 直接获得完整类型提示。
• 配套 AI.md：面向 AI 助手的使用指南（API 速查、最小示例、典型错误对照），AI 编码工具可直接读取。

与同类的区别（选型参考）

适用：流程步骤、里程碑、审批轨迹等「时间轴 / 步骤条」展示，需要蛇形折返布局节省纵向空间。 不适用：需要交互（点击节点等，无任何事件）；数据频繁变动的实时场景（每次全量重排）。

主参数

data 参数

示例

注：数据不满一行时，组件会向插槽补 { ljsTempTag: true } 占位对象，请在插槽内先过滤（如 v-if="!row.ljsTempTag"）。

<template>
  <LjsTimelineS :data="list" :rowNum="4" :curveHeight="80">
    <template #default="{ row }">
      <div v-if="!row.ljsTempTag" class="node">
        <div class="name">{{ row.label }}</div>
        <div class="date">{{ row.date }}</div>
        <div class="content">{{ row.content }}</div>
      </div>
    </template>
  </LjsTimelineS>
</template>

<script setup>
import 'ljs-s-timeline/index.css';
import LjsSTimeline from 'ljs-s-timeline';

const LjsTimelineS = LjsSTimeline.LjsTimelineS;

const list = ref([
  { label: '立项', date: '2026-01', content: '完成立项评审', LJS_S_point_color: '#409EFF' },
  { label: '开发', date: '2026-02', content: '进入开发阶段' },
  { label: '联调', date: '2026-03', content: '接口联调与测试' },
]);
</script>