Anchor 锚点

用于跳转到页面指定位置。

何时使用

需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

代码演示

基本使用

最简单的用法。

<template>
  <a-anchor>
    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
    <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
    <a-anchor-link
      href="#components-anchor-demo-basic"
      title="Basic demo with Target"
      target="_blank"
    />
    <a-anchor-link href="#API" title="API">
      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <a-anchor-link href="#Link-Props" title="Link Props" />
    </a-anchor-link>
  </a-anchor>
</template>
Basic demo
Static demo
API
Anchor Props
Link Props
自定义 click 事件

点击锚点不记录历史。

<template>
  <a-anchor :affix="false" @click="handleClick">
    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
    <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
    <a-anchor-link href="#API" title="API">
      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <a-anchor-link href="#Link-Props" title="Link Props" />
    </a-anchor-link>
  </a-anchor>
</template>
<script lang="ts">
import { defineComponent } from 'vue'; 
export default defineComponent({
  setup() {
    const handleClick = (e: Event, link: string) => {
      e.preventDefault();
      console.log(link);
    };
    return {
      handleClick,
    };
  },
});
</script>
设置锚点滚动偏移量

锚点目标滚动到屏幕正中间。

<template>
  <a-anchor :target-offset="targetOffset">
    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
    <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
    <a-anchor-link href="#API" title="API">
      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <a-anchor-link href="#Link-Props" title="Link Props" />
    </a-anchor-link>
  </a-anchor>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'; 
export default defineComponent({
  setup() {
    const targetOffset = ref<number | undefined>(undefined);
    onMounted(() => {
      targetOffset.value = window.innerHeight / 2;
    });
    return {
      targetOffset,
    };
  },
});
</script>
Basic demo
Static demo
API
Anchor Props
Link Props
静态位置

不浮动，状态不随页面滚动变化。

<template>
  <a-anchor :affix="false">
    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
    <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
    <a-anchor-link href="#API" title="API">
      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <a-anchor-link href="#Link-Props" title="Link Props" />
    </a-anchor-link>
  </a-anchor>
</template>
Basic demo
Static demo
API
Anchor Props
Link Props
自定义锚点高亮

自定义锚点高亮。

<template>
  <a-anchor :affix="false" :getCurrentAnchor="getCurrentAnchor">
    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
    <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
    <a-anchor-link href="#API" title="API">
      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <a-anchor-link href="#Link-Props" title="Link Props" />
    </a-anchor-link>
  </a-anchor>
</template>
<script lang="ts">
import { defineComponent } from 'vue'; 
export default defineComponent({
  setup() {
    const getCurrentAnchor = () => {
      return '#components-anchor-demo-static';
    };
    return {
      getCurrentAnchor,
    };
  },
});
</script>
Basic demo
Static demo
API
Anchor Props
Link Props
监听锚点链接改变

监听锚点链接改变。

<template>
  <a-anchor :affix="false" @change="onChange">
    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
    <a-anchor-link href="#components-anchor-demo-static" title="Static demo" />
    <a-anchor-link href="#API" title="API">
      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <a-anchor-link href="#Link-Props" title="Link Props" />
    </a-anchor-link>
  </a-anchor>
</template>
<script lang="ts">
import { defineComponent } from 'vue'; 
export default defineComponent({
  setup() {
    const onChange = (link: string) => {
      console.log('Anchor:OnChange', link);
    };
    return {
      onChange,
    };
  },
});
</script>

API#

Anchor Props

成员 说明 类型 默认值 版本
affix 固定模式 boolean true
bounds 锚点区域边界 number 5(px)
getContainer 指定滚动的容器 () => HTMLElement () => window
offsetBottom 距离窗口底部达到指定偏移量后触发 number
offsetTop 距离窗口顶部达到指定偏移量后触发 number
showInkInFixed :affix="false" 时是否显示小圆点 boolean false
wrapperClass 容器的类名 string -
wrapperStyle 容器样式 object -
getCurrentAnchor 自定义高亮的锚点 () => string - 1.5.0
targetOffset 锚点滚动偏移量，默认与 offsetTop 相同，例子 number offsetTop 1.5.0

事件

事件名称 说明 回调参数 版本
click click 事件的 handler Function(e: Event, link: Object)
change 监听锚点链接改变 (currentActiveLink: string) => void
成员 说明 类型 默认值 版本
href 锚点链接 string
title 文字内容 string|slot
target 该属性指定在何处显示链接的资源。 string 1.5.0