🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

2.9 KiB

category subtitle cols type title cover coverDark
Components 锚点 1 导航 Anchor https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original

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

何时使用

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

API

Anchor Props

成员 说明 类型 默认值 版本
affix 固定模式 boolean true
bounds 锚点区域边界 number 5(px)
getContainer 指定滚动的容器 () => HTMLElement () => window
getCurrentAnchor 自定义高亮的锚点 (activeLink: string) => string - activeLink(3.3)
offsetBottom 距离窗口底部达到指定偏移量后触发 number
offsetTop 距离窗口顶部达到指定偏移量后触发 number
showInkInFixed :affix="false" 时是否显示小方块 boolean false
targetOffset 锚点滚动偏移量,默认与 offsetTop 相同,例子 number offsetTop 1.5.0
wrapperClass 容器的类名 string -
wrapperStyle 容器样式 object -
items 数据化配置选项内容,支持通过 children 嵌套 { key, href, title, target, children }[] 具体见 - 4.0
direction 设置导航方向 vertical | horizontal vertical 4.0
customTitle 使用插槽自定义选项 title v-slot="AnchorItem" - 4.0

AnchorItem

成员 说明 类型 默认值 版本
key 唯一标志 string | number -
href 锚点链接 string -
target 该属性指定在何处显示链接的资源 string -
title 文字内容 VueNode | (item: AnchorItem) => VueNode -
children 嵌套的 Anchor Link,注意:水平方向该属性不支持 AnchorItem[] -

事件

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