Anchor 锚点

通过锚点,您可以很快找到当前页面上信息内容的位置。

基础用法

最简单的用法。

水平模式

水平排列的锚点

TIP

水平模式不支持sub-link槽位

滚动的容器

自定义滚动区域,使用 offset props 可以设置锚点滚动偏移。 监听link-click事件并阻止浏览器的默认行为,然后它不会改变历史。

Fixed Top Block
part1
part2
part3

锚点链接变化

监听锚点链接变化

下划线类型

设置`type="underline"更改为下划线类型

固定模式

使用 affix 组件来固定住页面中的锚点。

Anchor API

Anchor Attributes

属性说明类型默认值
container滚动的容器string | HTMLElement | Window
offset设置锚点滚动的偏移量number0
bound触发锚点的元素的位置偏移量number15
duration设置容器滚动持续时间,单位为毫秒。number300
marker是否显示标记booleantrue
type设置锚点类型enumdefault
direction设置锚点方向enumvertical

Anchor Events

事件名说明类型
changestep 改变时的回调Function
click当用户点击链接时触发Function

Anchor Methods

名称说明类型
scrollTo手动滚动到特定位置。Function

Anchor Slots

名称说明
defaultAnchorLink 组件列表
属性说明类型默认值
title链接的文本内容。string
href链接的地址。string
名称说明
default链接的内容
sub-link子链接的槽位。

源代码

组件样式文档

贡献者