Components

Toc 页内目录

从当前页面或指定容器中收集多级标题并生成导航，支持平滑滚动与滚动监听。

通过数据传入或自动提取页面中的 h2/h3 标题。

#1. 系统介绍

ReCloud UI 是一套专注于开发运维控制台与内部工具的现代化组件库。

提供无障碍基础底座与高度定制的设计令牌系统。

支持在 Vue 3 与 Nuxt 4 环境中直接使用。

开箱即用的主题注水与组件自动导入支持。

<div id="doc-content">
  <AnchorHeading as="h2" id="intro">介绍</AnchorHeading>
  <p>内容...</p>
</div>

<!-- 目录导航 -->
<Toc container="#doc-content" />

属性	类型	默认值	说明
`container`	`string`	`document`	用于收集标题的容器 CSS 选择器。
`selector`	`string`	`'h2, h3'`	目标收集的标题 CSS 选择器。
`items`	`TocItem[]`	`—`	手动指定目录项（覆盖自动提取）：id、title、level?。
`scrollSpy`	`boolean`	`true`	是否在页面滚动时自动高亮当前所在视口的小节。
`offset`	`number`	`80`	滚动定位与 IntersectionObserver 计算时的顶部偏移量 (px)。