解释ElementUI的回到顶部功能显示错误的问题

本文主要探讨在使用ElementUI时遇到的回顶功能显示错误,强调直接复制粘贴代码可能导致的问题。通过查看Element文档并理解相关类名,结合Vue的点击事件处理,实现了正确回到顶部的功能。同时,为了避免滚动条显示,添加了相应样式,并在main.js中进行判断以确保页面初始位置不在顶部时能正常工作。
摘要由CSDN通过智能技术生成

解释ElementUI的回到顶部功能显示错误的问题

参考文章:vue中实现回到顶部功能
vue进入页面时不在顶部,检测滚动返回顶部按钮
文档:Element文档:Backtop 回到顶部


主要是解释这个报错问题,因为直接CtrlCV的话是不行的,具体实现代码可以看底部,中间是解释部分,可能有点小乱
可以在elementui文档里面F12看一下界面的结果
这里主要是用来引用你要进行滚动的那部分的class名称
如图
在这里插入图片描述
具体可以看文档的效果
https://element.eleme.cn/#/zh-CN/component/backtop
我自己代码:
在这里插入图片描述

效果:
在这里插入图片描述
不过做到这里之后你点击一下是没法回到顶部的,因为没加点击事件
点击事件我是引用了这里的:
vue中实现回到顶部功能

在这里插入图片描述
在这里插入图片描述
加完之后就可以点一下回到顶部啦。具体代码是这样的;
另外,加下面这个的原因就是为了隐藏边框出现的滚动条

overflow-x: auto;overflow-y: auto;

 <el-main style="position:relative;">
        <el-row :gutter="20" class="page-component__scroll" style=
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值