Anchor 锚点
通过锚点，您可以快速找到当前页面上的信息内容位置。
基础用法
最基本的使用
vue
<template>
<el-anchor :offset="70">
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<el-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor Attributes'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor Events'] }}
</el-anchor-link>
</template>
</el-anchor-link>
</el-anchor>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
</script>隐藏源代码
水平模式
水平对齐锚点
提示
水平模式不支持 sub-link 插槽。
vue
<template>
<el-anchor :offset="70" direction="horizontal">
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
</el-anchor>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
</script>隐藏源代码
滚动容器
自定义滚动区域，使用 offset 属性可以设置锚点滚动偏移量，监听 link-click 事件并阻止浏览器默认行为，这样就不会改变历史记录。
vue
<template>
<div>
<el-row>
<el-col :span="18">
<div
style="
height: 30px;
width: 70%;
background: #000;
position: absolute;
top: 0;
left: 0;
color: #fff;
"
>
Fixed Top Block
</div>
<div ref="containerRef" style="height: 300px; overflow-y: auto">
<div
id="part1"
style="
height: 300px;
background: rgba(255, 0, 0, 0.02);
margin-top: 30px;
"
>
part1
</div>
<div
id="part2"
style="
height: 300px;
background: rgba(0, 255, 0, 0.02);
margin-top: 30px;
"
>
part2
</div>
<div
id="part3"
style="
height: 300px;
background: rgba(0, 0, 255, 0.02);
margin-top: 30px;
"
>
part3
</div>
</div>
</el-col>
<el-col :span="6">
<el-anchor
:container="containerRef"
direction="vertical"
type="default"
: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>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const containerRef = ref<HTMLElement | null>(null)
const handleClick = (e: MouseEvent) => {
e.preventDefault()
}
</script>隐藏源代码
锚点链接改变
监听锚点链接的改变
vue
<template>
<el-anchor :offset="70" @change="handleChange">
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<el-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor Attributes'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor Events'] }}
</el-anchor-link>
</template>
</el-anchor-link>
</el-anchor>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
const handleChange = (href: string) => {
console.log(`anchor change: ${href}`)
}
</script>隐藏源代码
下划线类型
设置 type="underline" 变为下划线类型
vue
<template>
<el-anchor type="underline" :offset="70">
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<el-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor Attributes'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor Events'] }}
</el-anchor-link>
</template>
</el-anchor-link>
</el-anchor>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
</script>隐藏源代码
固钉模式
使用固钉组件将锚点固定在页面内。
vue
<template>
<el-affix :offset="60">
<el-anchor :offset="70" style="width: 300px">
<el-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<el-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor Attributes'] }}
</el-anchor-link>
<el-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor Events'] }}
</el-anchor-link>
</template>
</el-anchor-link>
</el-anchor>
</el-affix>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import anchorLocale from '../../.vitepress/i18n/component/anchor.json'
import { useLang } from '~/composables/lang'
const lang = useLang()
const locale = computed(() => anchorLocale[lang.value])
</script>隐藏源代码
Anchor API
Anchor 属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| container | 滚动容器。 | string | HTMLElement | Window | — |
| offset | 设置锚点滚动的偏移量。 | number | 0 |
| bound | 元素开始触发锚点的偏移量。 | number | 15 |
| duration | 设置容器滚动持续时间，单位毫秒。 | number | 300 |
| marker | 是否显示标记。 | boolean | true |
| type | 设置 Anchor 类型。 | 枚举 | default |
| direction | 设置 Anchor 方向。 | 枚举 | vertical |
| select-scroll-top 2.9.2 | 滚动时链接是否在顶部选中。 | boolean | false |
Anchor 事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 步骤改变时的回调 | Function |
| click | 当用户点击链接时触发 | Function |
Anchor 方法
| 名称 | 描述 | 类型 |
|---|---|---|
| scrollTo | 手动滚动到指定位置。 | Function |
Anchor 插槽
| 名称 | 描述 |
|---|---|
| default | AnchorLink 组件列表 |
AnchorLink 属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 锚点链接的文本内容。 | string | — |
| 原生 href 属性 | 锚点链接的地址。 | string | — |
AnchorLink 插槽
| 名称 | 描述 |
|---|---|
| default | 锚点链接的内容。 |
| sub-link | 子链接的插槽。 |
来源
贡献者
