Anchor 锚点
通过锚点,您可以很快找到当前页面上信息内容的位置。
基础用法
最简单的用法。
水平模式
水平排列的锚点
TIP
水平模式不支持sub-link槽位
滚动容器
自定义滚动区域,使用 offset props 可以设置锚点滚动偏移。 监听link-click事件并阻止浏览器的默认行为,从而不会更改历史记录。
锚点链接变化
监听锚点链接变化
下划线类型
设置type="underline"以更改为下划线类型
固定模式
使用 affix 组件来固定住页面中的锚点。
Anchor API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| container | 滚动的容器 | string | HTMLElement | Window | — |
| offset | 设置锚点滚动的偏移量 | number | 0 |
| bound | 触发锚点的元素的位置偏移量 | number | 15 |
| duration | 设置容器滚动持续时间,单位为毫秒。 | number | 300 |
| marker | 是否显示标记 | boolean | true |
| type | 设置锚点类型 | enum | default |
| direction | 设置锚点方向 | enum | vertical |
| select-scroll-top 2.9.2 | 滚动时,链接是否选中位于顶部 | boolean | false |
Anchor Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | step 改变时的回调 | Function |
| click | 当用户点击链接时触发 | Function |
Anchor Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| scrollTo | 手动滚动到特定位置。 | Function |
Anchor Slots
| 名称 | 说明 |
|---|---|
| default | AnchorLink 组件列表 |
AnchorLink Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 链接的文本内容。 | string | — |
| href | 链接的地址。 | string | — |
AnchorLink Slots
| 名称 | 说明 |
|---|---|
| default | 链接的内容 |
| sub-link | 子链接的槽位。 |