这是官网的基础语法和教程
官方给出的使用只有一行代码,没有过多的解释。
而实际使用也确实如此,确实一行代码就可以用了。
但是,在使用时往往存在各种各样的问题,笔者在用这个组件时也踩了不少坑,多方测试,发现如下问题(报错问题不在本篇解决范围,按照报错提示解决就好了),汇总如下:
注意事项:
最常见的问题就是不能显示(没有反应),好像这个组件被隐藏了一样,折腾半天最后连组件长什么样都不知道,,,,
这里放一个图,这是组件默认的样子,我放在了dialog里。
代码如下:
<el-backtop target=".detailDia .el-dialog__body" :right="130" :bottom="60"/>
其中right和bottom是距离页面右边距和距离页面底部距离设置,target:官方文档说明的是,target
触发滚动的对象,String类型。我理解的是指向父容器对象,经测试,有时不写target属性也可以用,即
<el-backtop/>
这样也是可以生效的,前提是你放对了地方。所以,使用很简单,踩坑大半天~。
注意事项1:target的使用,可以不写,但大部分情况要写,官方文档说明的是,target:
触发滚动的对象,String类型。我理解的是指向父容器对象,经测试,有时不写target属性也可以用。所以你要找到需要放置回到顶部这个组件的容器,然后使用css选择器,定位到父容器。
注意事项2:target指向的父容器要有滚动条,这个很坑,你需要找到真正的父容器 :P,比如说,你将回到顶部组件放到el-dialog组件里,那么你target里应该写的是’#el-dialog的id .el-dialog__body‘(真正的父容器定位),这样写是无效的’#el-dialog的id‘(虚假的父容器定位),因为实际上产生滚动条的是el-dialog下的class='el-dialog__body'这个dom。如果你的父容器没有滚动条,你需要加上以下代码,以产生一个滚动条。
style="height:XXXpx;overflow: auto;"
注意事项3:组件放置的位置,通常是在父容器下,第一行。不要放在末尾,可能导致不能生效! 如果使用的自定义组件,你可以这样写。
<el-dialog :visible.sync="openDetail" :close-on-click-modal='false' title="信息详情" class="detailDia">
<el-backtop target=".detailDia .el-dialog__body" :right="130" :bottom="60"/>
<detail-page v-bind="detailMsg"/>
</el-dialog>
效果图如下
注意事项4:自定义组件图标等信息时,el-backtop组件支持插槽写法。