Anchor 锚点

概述

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

代码示例

Anchor 锚点 - 图1

基础用法

最简单的用法。

  1. <template>
  2.     <Anchor show-ink>
  3.         <AnchorLink href="#basic_usage" title="Basic Usage" />
  4.         <AnchorLink href="#static_position" title="Static Position" />
  5.         <AnchorLink href="#API" title="API">
  6.             <AnchorLink href="#Anchor_props" title="Anchor props" />
  7.             <AnchorLink href="#Anchor_events" title="Anchor events" />
  8.             <AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
  9.         </AnchorLink>
  10.     </Anchor>
  11. </template>
  12. <script>
  13.     export default {
  15.     }
  16. </script>

Anchor 锚点 - 图2

静态位置

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

  1. <template>
  2.     <Anchor :affix="false" show-ink>
  3.         <AnchorLink href="#basic_usage" title="Basic Usage" />
  4.         <AnchorLink href="#static_position" title="Static Position" />
  5.         <AnchorLink href="#API" title="API">
  6.             <AnchorLink href="#Anchor_props" title="Anchor props" />
  7.             <AnchorLink href="#Anchor_events" title="Anchor events" />
  8.             <AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
  9.         </AnchorLink>
  10.     </Anchor>
  11. </template>
  12. <script>
  13.     export default {
  15.     }
  16. </script>

API

Anchor props

属性 说明 类型 默认值
affix 固定模式 Boolean true
offset-top 距离窗口顶部达到指定偏移量后触发 Number 0
offset-bottom 距离窗口底部达到指定偏移量后触发 Number -
bounds 锚点区域边界，单位：px Number 5
scroll-offset 点击滚动的额外距离 Number 0
container 指定滚动的容器 String | HTMLElement -
show-ink 是否显示小圆点 Boolean false

Anchor events

事件名 说明 返回值
on-select 点击锚点时触发，返回链接 href
on-change 链接改变时触发，返回新链接和旧链接 newHref, oldHref

AnchorLink props

属性 说明 类型 默认值
href 锚点链接 String -
title 文字内容 String -
scroll-offset 点击滚动的额外距离 Number 0