Anchor 锚点

Anchor 锚点

概述

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

代码示例

  • 基础用法

基础用法

最简单的用法。

<template>
    <Anchor show-ink>
        <AnchorLink href="#basic_usage" title="Basic Usage" />
        <AnchorLink href="#static_position" title="Static Position" />
        <AnchorLink href="#API" title="API">
            <AnchorLink href="#Anchor_props" title="Anchor props" />
            <AnchorLink href="#Anchor_events" title="Anchor events" />
            <AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
        </AnchorLink>
    </Anchor>
</template>
<script>
    export default {
        
    }
</script>

  • 基础用法

静态位置

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

<template>
    <Anchor :affix="false" show-ink>
        <AnchorLink href="#basic_usage" title="Basic Usage" />
        <AnchorLink href="#static_position" title="Static Position" />
        <AnchorLink href="#API" title="API">
            <AnchorLink href="#Anchor_props" title="Anchor props" />
            <AnchorLink href="#Anchor_events" title="Anchor events" />
            <AnchorLink href="#AnchorLink_props" title="AnchorLink props" />
        </AnchorLink>
    </Anchor>
</template>
<script>
    export default {
        
    }
</script>

API

Anchor props

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

Anchor events

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

AnchorLink props

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