Anchor 锚点 ​

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

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

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

基础用法 ​

最简单的用法，垂直排列的锚点列表。

<template>
  <el-anchor>
    <el-anchor-link href="#section-1" title="第一节" />
    <el-anchor-link href="#section-2" title="第二节" />
    <el-anchor-link href="#section-3" title="第三节" />
  </el-anchor>
</template>

<script lang="ts" setup>
import { Anchor as ElAnchor, AnchorLink as ElAnchorLink } from '@szhn/dh-design-pc'

</script>

水平模式 ​

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

<template>
  <el-anchor direction="horizontal">
    <el-anchor-link href="#part-1" title="第一节" />
    <el-anchor-link href="#part-2" title="第二节" />
    <el-anchor-link href="#part-3" title="第三节" />
  </el-anchor>
</template>

<script lang="ts" setup>
import { Anchor as ElAnchor, AnchorLink as ElAnchorLink } from '@szhn/dh-design-pc'

</script>

滚动容器 ​

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

<template>
  <div class="anchor-demo">
    <div class="container" id="anchor-container">
      <div id="sec-1" class="section">第一节 内容</div>
      <div id="sec-2" class="section">第二节 内容</div>
      <div id="sec-3" class="section">第三节 内容</div>
    </div>
    <el-anchor container="#anchor-container" :offset="10">
      <el-anchor-link href="#sec-1" title="第一节" />
      <el-anchor-link href="#sec-2" title="第二节" />
      <el-anchor-link href="#sec-3" title="第三节" />
    </el-anchor>
  </div>
</template>

<script lang="ts" setup>
import { Anchor as ElAnchor, AnchorLink as ElAnchorLink } from '@szhn/dh-design-pc'

</script>

<style scoped>
.anchor-demo {
  display: flex;
  gap: 24px;
}
.container {
  flex: 1;
  height: 240px;
  overflow: auto;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--el-border-radius-base);
}
.section {
  height: 180px;
  padding: 16px;
  color: var(--el-text-color-regular);
  border-bottom: 1px dashed var(--el-border-color-lighter);
}
</style>

下划线类型 ​

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

<template>
  <el-anchor type="underline" direction="horizontal">
    <el-anchor-link href="#u-1" title="第一节" />
    <el-anchor-link href="#u-2" title="第二节" />
    <el-anchor-link href="#u-3" title="第三节" />
  </el-anchor>
</template>

<script lang="ts" setup>
import { Anchor as ElAnchor, AnchorLink as ElAnchorLink } from '@szhn/dh-design-pc'

</script>

锚点链接变化 ​

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

<template>
  <div>
    <p class="tip">当前激活锚点：{{ current }}</p>
    <el-anchor @change="onChange">
      <el-anchor-link href="#c-1" title="第一节" />
      <el-anchor-link href="#c-2" title="第二节" />
      <el-anchor-link href="#c-3" title="第三节" />
    </el-anchor>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Anchor as ElAnchor, AnchorLink as ElAnchorLink } from '@szhn/dh-design-pc'


const current = ref('')
function onChange(href: string) {
  current.value = href
}
</script>

<style scoped>
.tip {
  color: var(--el-text-color-regular);
  margin-bottom: 8px;
}
</style>

固钉模式 ​

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

<template>
  <div class="affix-demo">
    <div class="nav-col">
      <el-affix :offset="72">
        <div class="anchor-panel">
          <el-anchor :offset="82">
            <el-anchor-link href="#anchor-affix-overview" title="概览" />
            <el-anchor-link href="#anchor-affix-api" title="API 说明" />
            <el-anchor-link href="#anchor-affix-faq" title="常见问题" />
          </el-anchor>
        </div>
      </el-affix>
    </div>
    <div class="content-col">
      <section id="anchor-affix-overview" class="section">
        <h4>概览</h4>
        <p>锚点配合固钉后，可以在滚动长页面时持续保持可见，方便用户随时跳转。</p>
      </section>
      <section id="anchor-affix-api" class="section">
        <h4>API 说明</h4>
        <p>常见用法是通过 <code>offset</code> 控制滚动偏移，通过 <code>change</code> 监听当前激活链接。</p>
      </section>
      <section id="anchor-affix-faq" class="section">
        <h4>常见问题</h4>
        <p>如果页面顶部有固定导航，可同步调整 Affix 与 Anchor 的偏移量，避免跳转后标题被遮挡。</p>
      </section>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Affix as ElAffix, Anchor as ElAnchor, AnchorLink as ElAnchorLink } from '@szhn/dh-design-pc'

</script>

<style scoped>
.affix-demo {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.nav-col {
  width: 220px;
  flex: 0 0 220px;
}

.anchor-panel {
  padding: 16px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 12px;
  background: var(--el-fill-color-blank);
}

.content-col {
  flex: 1;
}

.section {
  min-height: 220px;
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--el-fill-color-light);
}

.section h4 {
  margin: 0 0 12px;
}

.section p {
  margin: 0;
  line-height: 1.8;
  color: var(--el-text-color-regular);
}
</style>

API ​

Anchor Attributes ​

属性说明类型默认值
container滚动的容器string / HTMLElement / Window—
offset锚点滚动偏移量number0
bound触发锚点元素的位置偏移量number15
duration滚动动画时长（毫秒）number300
marker是否显示标记booleantrue
type锚点类型default | underlinedefault
direction锚点方向vertical | horizontalvertical
select-scroll-top 2.9.2滚动到顶部时是否选中对应锚点booleanfalse

Anchor Events ​

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

Anchor Exposes ​

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

Anchor Slots ​

插槽名说明
defaultAnchorLink 组件列表
属性说明类型
title链接文本string
href链接地址string
插槽名说明
default自定义链接内容
sub-link子级链接插槽

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