开发预览更新于 2026-05-10

Anchor 锚点导航

显式列出页面锚点的侧栏，滚动时高亮当前可见小节，点击平滑跳转。

基础用法

items 为锚点列表，每项 { href, label }；href 形如 #section-id，对应页面里 <h2 id="section-id">。可嵌套 children 一层。

背景

概述

这是概述部分的第 1 段示例文本。

这是概述部分的第 2 段示例文本。

这是概述部分的第 3 段示例文本。

这是概述部分的第 4 段示例文本。

基础用法

这是基础用法部分的第 1 段示例文本。

这是基础用法部分的第 2 段示例文本。

这是基础用法部分的第 3 段示例文本。

这是基础用法部分的第 4 段示例文本。

API

这是 API 部分的第 1 段示例文本。

这是 API 部分的第 2 段示例文本。

这是 API 部分的第 3 段示例文本。

这是 API 部分的第 4 段示例文本。

<script setup lang="ts">
import { CfAnchor, type AnchorItem } from '@chufix-design/vue';

const items: AnchorItem[] = [
  { href: '#anchor-intro', label: '概述' },
  { href: '#anchor-usage', label: '基础用法' },
  { href: '#anchor-api', label: 'API' },
];
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 160px; gap: 24px; max-height: 320px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: 8px; padding: 16px;">
    <div>
      <h3 id="anchor-intro" style="margin-top: 0;">概述</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`a-${i}`">这是概述部分的第 {{ i }} 段示例文本。</p>
      <h3 id="anchor-usage">基础用法</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`b-${i}`">这是基础用法部分的第 {{ i }} 段示例文本。</p>
      <h3 id="anchor-api">API</h3>
      <p style="color: var(--fg-2);" v-for="i in 4" :key="`c-${i}`">这是 API 部分的第 {{ i }} 段示例文本。</p>
    </div>
    <CfAnchor :items="items" :offset-top="0" />
  </div>
</template>

<CfAnchor items={items} offsetTop={0} />

API

属性	类型	默认值	说明
`items`	`AnchorItem[]`	`—`	锚点列表
`offsetTop`	`number`	`0`	高亮判定与滚动跳转时的顶部偏移（像素）
`bounds`	`number`	`5`	元素距顶 ≤ `bounds + offsetTop` 时视为已进入；越小越严格
`target`	`string`	`—`	滚动容器选择器；省略时监听 `window`

AnchorItem

字段	类型	说明
`href`	`string`	锚点哈希，如 `#install`
`label`	`string`	显示文本
`children`	`AnchorItem[]`	子锚点

事件：onChange(href) —— 当前高亮的锚点变化时触发。