FxAnchor 锚点

通过锚点可以快速找到当前页面信息内容的位置。

基础用法

最基础的用法。

<template>
  <FxAnchor :offset="70">
    <FxAnchorLink href="#basic-usage" title="基础用法" />
    <FxAnchorLink href="#horizontal-mode" title="水平模式" />
    <FxAnchorLink href="#scroll-container" title="滚动容器" />
    <FxAnchorLink href="#anchor-api" title="Anchor API">
      <template #sub-link>
        <FxAnchorLink href="#anchor-attributes" title="Attributes" />
        <FxAnchorLink href="#anchor-events" title="Events" />
      </template>
    </FxAnchorLink>
  </FxAnchor>
</template>

水平模式

水平排列的锚点。

水平模式不支持 sub-link 插槽。

<template>
  <FxAnchor :offset="70" direction="horizontal">
    <FxAnchorLink href="#basic-usage" title="基础用法" />
    <FxAnchorLink href="#horizontal-mode" title="水平模式" />
    <FxAnchorLink href="#scroll-container" title="滚动容器" />
  </FxAnchor>
</template>

滚动容器

自定义滚动区域，通过 offset 设置锚点滚动偏移，监听 click 事件并阻止默认行为可避免修改 history。

<template>
  <div class="anchor-demo">
    <div class="anchor-demo__main">
      <div class="fixed-top-block">Fixed Top Block</div>
      <div id="anchor-scroll-container" class="anchor-demo__container">
        <div id="part1" class="anchor-demo__section anchor-demo__section--part1">
          part1
        </div>
        <div id="part2" class="anchor-demo__section anchor-demo__section--part2">
          part2
        </div>
        <div id="part3" class="anchor-demo__section anchor-demo__section--part3">
          part3
        </div>
      </div>
    </div>
    <div class="vp-raw">
      <FxAnchor
        container="#anchor-scroll-container"
        direction="vertical"
        type="default"
        :offset="30"
        @click="handleClick"
      >
        <FxAnchorLink href="#part1" title="part1" />
        <FxAnchorLink href="#part2" title="part2" />
        <FxAnchorLink href="#part3" title="part3" />
      </FxAnchor>
    </div>
  </div>
</template>

<script lang="ts" setup>
const handleClick = (e: MouseEvent) => {
  e.preventDefault()
}
</script>

<style scoped>
.anchor-demo {
  display: flex;
  gap: 24px;
}
.anchor-demo__main {
  flex: 1;
  position: relative;
}
.fixed-top-block {
  height: 30px;
  width: 70%;
  background: #000;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.anchor-demo__container {
  height: 300px;
  overflow-y: auto;
}
.anchor-demo__section {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--fx-text-color-secondary);
  margin-top: 30px;
}
.anchor-demo__section--part1 {
  background: rgba(255, 0, 0, 0.02);
}
.anchor-demo__section--part2 {
  background: rgba(0, 255, 0, 0.02);
}
.anchor-demo__section--part3 {
  background: rgba(0, 0, 255, 0.02);
}
</style>

锚点链接变化

监听锚点链接变化。

<template>
  <FxAnchor :offset="70" @change="handleChange">
    <FxAnchorLink href="#basic-usage" title="基础用法" />
    <FxAnchorLink href="#horizontal-mode" title="水平模式" />
    <FxAnchorLink href="#scroll-container" title="滚动容器" />
    <FxAnchorLink href="#anchor-api" title="Anchor API">
      <template #sub-link>
        <FxAnchorLink href="#anchor-attributes" title="Attributes" />
        <FxAnchorLink href="#anchor-events" title="Events" />
      </template>
    </FxAnchorLink>
  </FxAnchor>
</template>

<script lang="ts" setup>
const handleChange = (href: string) => {
  console.log(`anchor change: ${href}`)
}
</script>

下划线类型

设置 type="underline" 切换为下划线类型。

<template>
  <FxAnchor :offset="70" type="underline">
    <FxAnchorLink href="#basic-usage" title="基础用法" />
    <FxAnchorLink href="#horizontal-mode" title="水平模式" />
    <FxAnchorLink href="#scroll-container" title="滚动容器" />
    <FxAnchorLink href="#anchor-api" title="Anchor API">
      <template #sub-link>
        <FxAnchorLink href="#anchor-attributes" title="Attributes" />
        <FxAnchorLink href="#anchor-events" title="Events" />
      </template>
    </FxAnchorLink>
  </FxAnchor>
</template>

固定模式

fx 暂无独立 Affix 组件，此处用 CSS position: sticky 模拟固定效果。

<template>
  <div class="affix-wrapper">
    <FxAnchor :offset="70" class="affix-anchor">
      <FxAnchorLink href="#basic-usage" title="基础用法" />
      <FxAnchorLink href="#horizontal-mode" title="水平模式" />
      <FxAnchorLink href="#scroll-container" title="滚动容器" />
      <FxAnchorLink href="#anchor-api" title="Anchor API">
        <template #sub-link>
          <FxAnchorLink href="#anchor-attributes" title="Attributes" />
          <FxAnchorLink href="#anchor-events" title="Events" />
        </template>
      </FxAnchorLink>
    </FxAnchor>
  </div>
</template>

<style scoped>
.affix-wrapper {
  position: sticky;
  top: 60px;
}
.affix-anchor {
  width: 300px;
}
</style>

Anchor API

Attributes

属性	说明	类型	默认值
container	滚动容器	string | HTMLElement | Window	—
offset	锚点滚动的偏移量	number	0
bound	元素开始触发锚点的偏移量	number	15
duration	点击锚点时容器滚动时长（毫秒）	number	300
marker	是否显示标记	boolean	true
type	锚点类型	'default' | 'underline'	'default'
direction	锚点方向	'vertical' | 'horizontal'	'vertical'
select-scroll-top	滚动到顶部时是否选中链接	boolean	false

Events

事件名	说明	类型
change	锚点链接变化时回调	(href: string) => void
click	点击链接时触发	(e: MouseEvent, href?: string) => void

Exposes

名称	说明	类型
scrollTo	手动滚动到指定位置	(href: string) => void

Slots

插槽名	说明
default	FxAnchorLink 组件列表

AnchorLink API

Attributes

属性	说明	类型	默认值
title	锚点链接文字	string	—
href	锚点链接地址	string	—

Slots

插槽名	说明
default	锚点链接内容
sub-link	子链接插槽