Skip to content

SeriesNav 系列导航

有序内容导航组件,用于展示"文章系列/目录"的条目列表:按序编号、当前篇高亮、超过阈值时窗口化折叠为 "N more parts..."。视觉风格参考 dev.to 的系列侧栏(Series widget)。

何时使用:把多篇文章组织成一个系列(教程、专栏、长篇连载),在文章页展示系列内的上一篇/下一篇及全部篇目导航,便于连续阅读。

基础用法

传入按阅读顺序排列的 items 即可。当前篇通过 active 指定,自动高亮。

带标题

通过 title 设置系列名,展示在列表上方。

窗口化折叠

当条目数超过 visibleCount 时,组件会固定展示 首项、末项、当前激活项及相邻项,中间折叠为 "N more parts...",点击展开完整列表。

自定义行内容

通过 #item 插槽自定义每一行的渲染(参数含 itemindex)。#title 插槽可覆盖标题。

API

Props

属性类型默认值说明
itemsSeriesNavItem[][]有序导航项列表(顺序即展示顺序,组件不排序)
activestringundefined当前激活项的 key(高亮显示)
titlestringundefined可选标题(系列名,可通过 #title 插槽覆盖)
numberedbooleantrue是否显示序号圆点
visibleCountnumber0折叠阈值:条目数超过时窗口化折叠为 "N more parts..."。0 表示不折叠

SeriesNavItem

属性类型说明
keystring唯一标识(active 匹配用)
labelstring行文本
hrefstring链接地址(存在且未禁用时渲染为 <a>
disabledboolean是否禁用(禁用项不渲染为链接)

Slots

名称参数说明
item{ item, index }自定义每一行内容
title-自定义标题内容(覆盖 title)

Released under the MIT License