锚点
通过锚点，您可以快速找到信息内容在当前页面的位置。
基本用法
最基本的用法
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>隐藏来源
水平模式
水平对齐的锚点
TIP
水平模式不支持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">
<div class="vp-raw">
<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>
</div>
</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>隐藏来源
词缀模式
使用 Affix 组件来固定页面内的锚点。
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>隐藏来源
锚点 API
锚属性
| 物业 | 描述 | 类型 | 默认 | | --------------------- | -------------------------------------- | ------------------------------------- | ---------- | --- | | 集装箱 | 滚动容器。 | string | HTMLElement | Window | — | | 偏移 | 设置锚点滚动的偏移量。 | number | 0 | | 绑定 | 开始触发锚点的元素的偏移量。 | number | 15 | 15 | | 持续时间 | 设置容器的滚动持续时间，以毫秒为单位。 | number | 300 | 300 | | 标记 | 是否显示标记。 | 布尔值 | 真实 | | 类型 | 设置锚点类型。 | 枚举 | default | | 方向 | 设置锚点方向。 | 枚举 | vertical | | 选择滚动顶部 2.9.2 | 滚动是否选择顶部链接 | 布尔值 | 假 |
主播活动
| 名称 | 描述 | 类型 |
|---|---|---|
| 改变 | 步骤改变时的回调 | 功能 |
| 点击 | 当用户点击链接时触发 | 功能 |
主播曝光
| 名称 | 描述 | 类型 |
|---|---|---|
| 滚动至 | 手动滚动到特定位置。 | 功能 |
锚槽
| 名称 | 描述 |
|---|---|
| 默认 | AnchorLink 组件列表 |
AnchorLink 属性
| 物业 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 标题 | 锚链接的文本内容。 | string | — |
| 链接 | 锚链接的地址。 | string | — |
AnchorLink 插槽
| 名称 | 描述 |
|---|---|
| 默认 | 锚链接的内容。 |
| 子链接 | 子链接的插槽。 |