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