Anchor 锚点

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

何时使用

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

示例

基本用法

<template>
  <f-anchor :affix="false" showInkInFixed>
    <f-anchor-link href="#何时使用" title="Basic demo" />
    <f-anchor-link href="#示例" title="Static demo" />
    <f-anchor-link href="#components-anchor-demo-c" title="Basic demo with Target" target="_blank" />
    <f-anchor-link href="#api" title="API">
      <f-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <f-anchor-link href="#Link-Props" title="Link Props" />
    </f-anchor-link>
  </f-anchor>
</template>

无轴线用法

<template>
  <f-anchor :affix="false" unline>
    <f-anchor-link href="#何时使用" title="Basic demo" />
    <f-anchor-link href="#示例" title="Static demo" />
    <f-anchor-link href="#components-anchor-demo-c" title="Basic demo with Target" target="_blank" />
    <f-anchor-link href="#api" title="API">
      <f-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <f-anchor-link href="#Link-Props" title="Link Props" />
    </f-anchor-link>
  </f-anchor>
</template>

高亮圆点用法

<template>
  <f-anchor :affix="false" :bar="false" showInkInFixed>
    <f-anchor-link href="#何时使用" title="Basic demo" />
    <f-anchor-link href="#示例" title="Static demo" />
    <f-anchor-link href="#components-anchor-demo-c" title="Basic demo with Target" target="_blank" />
    <f-anchor-link href="#api" title="API">
      <f-anchor-link href="#Anchor-Props" title="Anchor Props" />
      <f-anchor-link href="#Link-Props" title="Link Props" />
    </f-anchor-link>
  </f-anchor>
</template>

API

Anchor Props

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

注意

• 新增 unline，决定边线是否显示
• 新增 bar，决定是否显示高亮小圆点or高亮线条

事件

事件名称	说明	回调参数	版本
change	监听锚点链接改变	(currentActiveLink: string) => void		1.5.0
click	click 事件的 handler	Function(e: Event, link: Object)

Link Props

成员	说明	类型	默认值	版本
href	锚点链接	string
target	该属性指定在何处显示链接的资源。	string		1.5.0
title	文字内容	string|slot