Skip to content

Anchor 锚点

页面内部跳转导航。点击锚点平滑滚动到对应内容,滚动时自动高亮当前所在区段。

基本使用

最简单的用法:传入扁平的 items 列表,每项包含 href(CSS 选择器形式 #id)和 title

嵌套层级

items 支持 children 字段表达父子结构,子级会自动缩进。

监听变化

监听 change 事件可在锚点切换时触发联动逻辑(如埋点、菜单同步)。

调整高亮容差

bounds 控制元素到顶部多近时算"激活"(默认 5),offsetTop 让滚动停留位置距顶部预留空间,避免被 fixed header 遮挡。

拦截点击

监听 click 事件可在跳转前后追加业务逻辑,比如埋点。锚点的默认行为已在内部阻止。

API

Props

参数类型默认值说明
itemsAnchorLink[][]锚点列表,支持 children 嵌套
affixbooleantrue是否固定(保留外观位)
boundsnumber5元素到顶部小于此距离时视为激活(px)
offsetTopnumber0高亮判定与点击滚动统一加的顶部偏移(px)
targetOffsetnumberundefined仅点击滚动用的偏移;未传则回退 offsetTop
scrollContainerstring | HTMLElementwindow自定义滚动容器(CSS 选择器或元素引用)
showInkInFixedbooleanfalse固定时是否仍显示墨色滑块
字段类型说明
hrefstring必填,目标元素 id(带 #
titlestring显示文本,省略则用 href
childrenAnchorLink[]子级锚点(可任意层嵌套)

Events

事件名回调签名触发时机
change(activeHref: string)当前激活锚点变化时
click(event: MouseEvent, link: AnchorLink)点击锚点时(已阻默认)

Slots

名称说明
default自定义渲染(不使用 items,需自行写带 href<a>

Released under the MIT License.