比较编程网

锚点组件用于跳转到页面指定位置。

属性

Anchor

Antd	Element	说明
affix	—	固定模式
bounds	bound	锚点区域边界
—	duration	设置容器滚动持续时间，单位为毫秒。
getContainer	container	指定滚动的容器
getCurrentAnchor	—	自定义高亮的锚点
—	marker	是否显示标记
offsetTop	—	距离窗口顶部达到指定偏移量后触发
showInkInFixed	—	affix={false} 时是否显示小方块
targetOffset	offset	锚点滚动偏移量，默认与 offsetTop 相同
items	—	数据化配置选项内容，支持通过 children 嵌套
direction	direction	设置锚点方向
—	type	设置锚点类型
replace	—	替换浏览器历史记录中项目的 href 而不是推送它
—	select-scroll-top	滚动时，链接是否选中位于顶部

AnchorItem对象属性

AnchorItem 是 Ant Design 中 items 项的参数说明。

Antd	说明
key	唯一标志
href	锚点链接
target	该属性指定在何处显示链接的资源
title	文字内容
children	嵌套的 Anchor Link，注意：水平方向该属性不支持
replace	替换浏览器历史记录中的项目 href 而不是推送它

AnchorLink

虽然 Ant Design 中也存在 AnchorLink 子组件，不过官方建议使用 items 形式。

Antd	Element	说明
href	href	锚点链接
title	title	文字内容
target	—	该属性指定在何处显示链接的资源

AnchorLink Slots

由于 vue 的特性，在 Element Plus 中的组件存在 slot，在 AnchorLink 组件中通过 sub-link 来实现子链接的嵌套。

Element	说明
default	链接的内容
sub-link	子链接的槽位

事件

Antd	Element	说明
onChange	change	监听锚点链接改变
onClick	click	click 事件的 handler

暴露方法

Element	说明
scrollTo	手动滚动到特定位置。

小结

由于 React 的特性，Ant Design 中 Anchor 组件中的事件、子组件、属性都放到了属性里面，对比之下 Element Plus 则是分开来处理的。

参考链接：

• 锚点 Anchor – Ant Design
• Anchor 锚点 | Element Plus