Anchor 锚点
Anchor 用于快速定位当前页面或滚动容器内的信息位置。VISTA B 直接使用 Element Plus 的 el-anchor，适合长表单、配置页、报价计算器追加内容、户型选择这类内容较长且需要快速跳转的页面。
后台选择户型页面可用横向锚点选择建筑、竖向锚点选择楼层；当内容不适合拆成 Tab 时，可以平铺展示并使用锚点快速定位。
基础用法
用 el-anchor 包裹多个 el-anchor-link。默认是纵向排列，支持通过 sub-link 插槽添加子级锚点。
vue
<el-anchor :offset="80">
<el-anchor-link href="#basic" title="基础信息" />
<el-anchor-link href="#layout" title="页面结构">
<template #sub-link>
<el-anchor-link href="#table" title="表格区域" />
<el-anchor-link href="#card" title="卡片区域" />
</template>
</el-anchor-link>
<el-anchor-link href="#actions" title="页面操作" />
</el-anchor>水平模式
设置 direction="horizontal" 后，锚点会水平排列。水平模式适合页面顶部的楼栋、分组、阶段切换；官方提示：水平模式不支持 sub-link 插槽。
vue
<el-anchor direction="horizontal" type="underline" :offset="80">
<el-anchor-link href="#building-1" title="1 号楼" />
<el-anchor-link href="#building-2" title="2 号楼" />
<el-anchor-link href="#building-3" title="3 号楼" />
</el-anchor>滚动容器
用 container 指定滚动容器。offset 可以设置滚动偏移量；监听 click 事件并调用 preventDefault()，可以避免浏览器默认跳转改写历史记录。
vue
<script setup>
import { ref } from 'vue'
const containerRef = ref(null)
const handleClick = (event) => {
event.preventDefault()
}
</script>
<template>
<div ref="containerRef" style="height: 300px; overflow-y: auto">
<section id="part1">part1</section>
<section id="part2">part2</section>
<section id="part3">part3</section>
</div>
<el-anchor :container="containerRef" :offset="30" @click="handleClick">
<el-anchor-link href="#part1" title="part1" />
<el-anchor-link href="#part2" title="part2" />
<el-anchor-link href="#part3" title="part3" />
</el-anchor>
</template>锚点链接变化
监听 change 事件可以拿到当前激活的 href，用于同步页面标题、侧栏状态或埋点。
vue
<el-anchor :offset="80" @change="handleChange">
<el-anchor-link href="#basic" title="基础信息" />
<el-anchor-link href="#price" title="报价配置" />
<el-anchor-link href="#submit" title="提交信息" />
</el-anchor>下划线类型
设置 type="underline" 后，锚点使用下划线标记当前项。适合顶部导航或需要更轻量视觉标记的场景。
vue
<el-anchor type="underline" :offset="80">
<el-anchor-link href="#overview" title="概览" />
<el-anchor-link href="#detail" title="详情" />
<el-anchor-link href="#record" title="记录" />
</el-anchor>固定模式
长页面中，锚点通常与 el-affix 组合，让导航在滚动时保持可见。
vue
<el-affix :offset="60">
<el-anchor :offset="80" style="width: 220px">
<el-anchor-link href="#basic" title="基础信息" />
<el-anchor-link href="#layout" title="页面结构" />
<el-anchor-link href="#actions" title="页面操作" />
</el-anchor>
</el-affix>API
Anchor 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
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 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
change | 激活链接变化时触发 | (href: string) => void |
click | 点击锚点链接时触发 | (event: MouseEvent, href?: string) => void |
Anchor 方法
| 方法名 | 说明 | 类型 |
|---|---|---|
scrollTo | 手动滚动到指定位置 | (href: string) => void |
Anchor 插槽
| 插槽 | 说明 |
|---|---|
default | AnchorLink 组件列表 |
AnchorLink 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 链接文本内容 | string | 空 |
href | 链接地址 | string | 空 |
AnchorLink 插槽
| 插槽 | 说明 |
|---|---|
default | 自定义链接内容 |
sub-link | 子链接内容，水平模式不支持 |