Anchor 锚点
页面内部跳转导航。点击锚点平滑滚动到对应内容,滚动时自动高亮当前所在区段。
基本使用
最简单的用法:传入扁平的 items 列表,每项包含 href(CSS 选择器形式 #id)和 title。
嵌套层级
items 支持 children 字段表达父子结构,子级会自动缩进。
监听变化
监听 change 事件可在锚点切换时触发联动逻辑(如埋点、菜单同步)。
调整高亮容差
bounds 控制元素到顶部多近时算"激活"(默认 5),offsetTop 让滚动停留位置距顶部预留空间,避免被 fixed header 遮挡。
拦截点击
监听 click 事件可在跳转前后追加业务逻辑,比如埋点。锚点的默认行为已在内部阻止。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items | AnchorLink[] | [] | 锚点列表,支持 children 嵌套 |
| affix | boolean | true | 是否固定(保留外观位) |
| bounds | number | 5 | 元素到顶部小于此距离时视为激活(px) |
| offsetTop | number | 0 | 高亮判定与点击滚动统一加的顶部偏移(px) |
| targetOffset | number | undefined | 仅点击滚动用的偏移;未传则回退 offsetTop |
| scrollContainer | string | HTMLElement | window | 自定义滚动容器(CSS 选择器或元素引用) |
| showInkInFixed | boolean | false | 固定时是否仍显示墨色滑块 |
AnchorLink
| 字段 | 类型 | 说明 |
|---|---|---|
| href | string | 必填,目标元素 id(带 #) |
| title | string | 显示文本,省略则用 href |
| children | AnchorLink[] | 子级锚点(可任意层嵌套) |
Events
| 事件名 | 回调签名 | 触发时机 |
|---|---|---|
| change | (activeHref: string) | 当前激活锚点变化时 |
| click | (event: MouseEvent, link: AnchorLink) | 点击锚点时(已阻默认) |
Slots
| 名称 | 说明 |
|---|---|
| default | 自定义渲染(不使用 items,需自行写带 href 的 <a>) |