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 设置锚点滚动的偏移量 number 0
bound 触发锚点的元素的位置偏移量 number 15
duration 设置容器滚动持续时间,单位为毫秒。 number 300
marker 是否显示标记 boolean true
type 设置锚点类型 enum default
direction 设置锚点方向 enum vertical

Anchor Events

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

Anchor Methods

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

Anchor Slots

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

源代码

组件 样式 文档

贡献者