SuperAPI AI 工具集

el-backtop

通用与其它

查看项目

更新于 10-15 23:32

技能介绍

用途:el-backtop 是 Element Plus 提供的返回顶部组件,在长页面或可滚动容器中显示一个按钮,点击后滚动回顶部,用于改善长内容页面的导航体验。

主要能力:基础用法为 <el-backtop />。支持通过 target 指定触发滚动的目标容器;visibility-height 设置按钮显示的最小滚动高度,默认 200;right 与 bottom 设置按钮距右侧和底部的距离,默认均为 40;提供 click 事件,类型为 (evt: MouseEvent) => void;提供 default 插槽用于自定义按钮内容。

使用方式:可直接放置组件;自定义内容时在组件内写插槽内容并配合样式,例如 <el-backtop :bottom="100"><div class="backtop-custom">UP</div></el-backtop>。针对局部滚动容器,可设置 target=".scroll-container" 并配合 visibility-height。

适用场景:长文档阅读、长列表页面、需要快速回到顶部的可滚动区域。

限制与建议:资料未提供安装命令、版本要求、浏览器兼容性及收费信息。建议根据布局设置合适的 visibility-height,用 right 和 bottom 调整位置,滚动容器场景使用 target。