Anchor 锚点

用于跳转到页面指定位置，支持滚动监听自动高亮当前锚点。

基础用法

通过 ZcAnchorLink 定义锚点链接，点击可平滑滚动到对应位置。

基础用法

高级用法

API

基础用法

锚点组件的基础用法示例内容

高级用法

锚点组件的高级用法示例内容

API

锚点组件的 API 文档内容

<template>
  <div style="display: flex; gap: 24px;">
    <ZcAnchor :offset-top="20">
      <ZcAnchorLink href="#basic" title="基础用法" />
      <ZcAnchorLink href="#advanced" title="高级用法" />
      <ZcAnchorLink href="#api" title="API" />
    </ZcAnchor>
    <div style="flex: 1;">
      <div id="basic" style="height: 400px; padding: 20px; background: #f5f7fa;">
        <h3>基础用法</h3>
        <p>锚点组件的基础用法示例内容</p>
      </div>
      <div id="advanced" style="height: 400px; padding: 20px; background: #ecf5ff;">
        <h3>高级用法</h3>
        <p>锚点组件的高级用法示例内容</p>
      </div>
      <div id="api" style="height: 400px; padding: 20px; background: #f5f7fa;">
        <h3>API</h3>
        <p>锚点组件的 API 文档内容</p>
      </div>
    </div>
  </div>
</template>

水平锚点

通过 direction="horizontal" 设置水平方向的锚点。

章节一

章节二

章节三

<template>
  <ZcAnchor direction="horizontal" :offset-top="0">
    <ZcAnchorLink href="#part-1" title="章节一" />
    <ZcAnchorLink href="#part-2" title="章节二" />
    <ZcAnchorLink href="#part-3" title="章节三" />
  </ZcAnchor>
</template>

Anchor API

Props

参数	说明	类型	默认值
container	滚动容器选择器（默认 window）	string	''
current (v-model)	当前锚点	string	''
offsetTop	距顶部偏移量（px）	number	0
direction	方向	'vertical' | 'horizontal'	'vertical'
bound	高亮触发边界（px）	number	80
smooth	是否平滑滚动	boolean	true

Events

事件名	说明	回调参数
update:current	锚点变化	(href: string)
click	点击链接	(event: MouseEvent, href: string)
change	锚点变化	(href: string)

AnchorLink Props

参数	说明	类型	默认值
href	目标锚点（如 #section-1）	string	''
title	链接标题	string	''
level	缩进层级	number	0