开发预览更新于 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 段示例文本。

src/App.vue

<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>

<script setup>
import { CfAnchor } from '@chufix-design/vue';

const items= [
  { 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>

import { CfAnchor } from '@chufix-design/react';

export default function Demo() {
  const items: AnchorItem[] = [
    { href: '#anchor-intro', label: '概述' },
    { href: '#anchor-usage', label: '基础用法' },
    { href: '#anchor-api', label: 'API' },
  ];
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 160px", gap: 24, maxHeight: 320, overflowY: "auto", border: "1px solid var(--line-1)", borderRadius: 8, padding: 16 }}>
          <div>
            <h3 id="anchor-intro" style={{ marginTop: 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} offsetTop={0} />
        </div>
    </>
  );
}

import { CfAnchor } from '@chufix-design/react';

export default function Demo() {
  const items= [
    { href: '#anchor-intro', label: '概述' },
    { href: '#anchor-usage', label: '基础用法' },
    { href: '#anchor-api', label: 'API' },
  ];
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 160px", gap: 24, maxHeight: 320, overflowY: "auto", border: "1px solid var(--line-1)", borderRadius: 8, padding: 16 }}>
          <div>
            <h3 id="anchor-intro" style={{ marginTop: 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} offsetTop={0} />
        </div>
    </>
  );
}

API

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

AnchorItem

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

Events

Vue 事件	React 回调	载荷类型	说明
`change`	`onChange`	`string`	当前高亮的锚点变化时触发，载荷是新激活的 `href`