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	固定模式	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