Anchor 锚点

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

import { createApp } from 'vue'
import { ElAnchor, ElAnchorLink } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElAnchor)
app.use(ElAnchorLink)

基础用法

最简单的用法，垂直排列的锚点列表，支持一级 / 二级缩进。

水平模式

通过设置 direction="horizontal" 将锚点水平排列。水平模式下不支持 sub-link 槽位。

滚动容器

可以通过 container 自定义滚动区域，使用 offset 设置锚点滚动偏移。

下划线类型

设置 type="underline" 以使用下划线风格的锚点。

锚点链接变化

通过 change 事件监听锚点链接的变化。

固钉模式

通过 Affix 固定锚点导航，适合长页面或说明文档类场景。

API

Anchor Attributes

属性	说明	类型	默认值
container	滚动的容器	string / HTMLElement / Window	—
offset	锚点滚动偏移量	number	0
bound	触发锚点元素的位置偏移量	number	15
duration	滚动动画时长（毫秒）	number	300
marker	是否显示标记	boolean	true
type	锚点类型	default | underline	default
direction	锚点方向	vertical | horizontal	vertical
select-scroll-top	滚动到顶部时是否选中对应锚点	boolean	false

Anchor Events

事件名	说明	参数
change	当前激活锚点改变时触发	(href: string)
click	用户点击链接时触发	(event, href)

Anchor Exposes

名称	说明	类型
scrollTo	手动滚动到指定锚点位置	(href: string) => void

Anchor Slots

插槽名	说明
default	AnchorLink 组件列表

AnchorLink Attributes

属性	说明	类型
title	链接文本	string
href	链接地址	string

AnchorLink Slots

插槽名	说明
default	自定义链接内容
sub-link	子级链接插槽

更多示例请参考 Element Plus Anchor 文档。