解释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="overflow:hidden;"