Anchor 锚点
通过锚点可快速定位到当前页面中的信息位置。
基础用法
最简单的用法。
vue
<template>
<u-anchor :offset="70">
<u-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<u-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor Attributes'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor Events'] }}
</u-anchor-link>
</template>
</u-anchor-link>
</u-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>
<u-anchor :offset="70" direction="horizontal">
<u-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</u-anchor-link>
</u-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>
<u-row>
<u-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>
</u-col>
<u-col :span="6">
<div class="vp-raw">
<u-anchor
:container="containerRef"
direction="vertical"
type="default"
:offset="30"
@click="handleClick"
>
<u-anchor-link href="#part1" title="part1" />
<u-anchor-link href="#part2" title="part2" />
<u-anchor-link href="#part3" title="part3" />
</u-anchor>
</div>
</u-col>
</u-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>
<u-anchor :offset="70" @change="handleChange">
<u-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<u-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor Attributes'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor Events'] }}
</u-anchor-link>
</template>
</u-anchor-link>
</u-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>
<u-anchor type="underline" :offset="70">
<u-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<u-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor Attributes'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor Events'] }}
</u-anchor-link>
</template>
</u-anchor-link>
</u-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>
<u-affix :offset="60">
<u-anchor :offset="70" style="width: 300px">
<u-anchor-link :href="`#${locale['basic-usage']}`">
{{ locale['Basic Usage'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['horizontal-mode']}`">
{{ locale['Horizontal Mode'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['scroll-container']}`">
{{ locale['Scroll Container'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['anchor-api']}`">
{{ locale['Anchor API'] }}
<template #sub-link>
<u-anchor-link :href="`#${locale['anchor-attributes']}`">
{{ locale['Anchor Attributes'] }}
</u-anchor-link>
<u-anchor-link :href="`#${locale['anchor-events']}`">
{{ locale['Anchor Events'] }}
</u-anchor-link>
</template>
</u-anchor-link>
</u-anchor>
</u-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
锚点 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| container | 滚动容器 | string | HTMLElement | Window | — |
| offset | 锚点滚动的偏移量 | number | 0 |
| bound | 开始触发锚点高亮的元素偏移量 | number | 15 |
| duration | 容器滚动动画时长（毫秒） | number | 300 |
| marker | 是否显示指示标记 | boolean | true |
| type | 锚点类型 | enum | default |
| direction | 锚点方向 | enum | vertical |
| select-scroll-top | 选中链接时是否滚动到可视区域顶部 | boolean | false |
锚点 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当前锚点变化时回调 | Function |
| click | 用户点击链接时触发 | Function |
锚点 暴露
| 名称 | 说明 | 类型 |
|---|---|---|
| scrollTo | 手动滚动到指定位置 | Function |
锚点 插槽
| 名称 | 说明 |
|---|---|
| default | 锚点链接组件列表 |
锚点链接 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 锚点链接的文案 | string | — |
| href | 锚点链接地址 | string | — |
锚点链接 插槽
| 名称 | 说明 |
|---|---|
| default | 锚点链接的内容 |
| sub-link | 子级链接插槽 |