el-backtop回到顶部组件使用问题汇总

古城微笑少年丶 2021-09-25 05:08 2347阅读 0赞

这是官网的基础语法和教程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 1][]

官方给出的使用只有一行代码，没有过多的解释。

而实际使用也确实如此，确实一行代码就可以用了。

但是，在使用时往往存在各种各样的问题，笔者在用这个组件时也踩了不少坑，多方测试，发现如下问题（报错问题不在本篇解决范围，按照报错提示解决就好了），汇总如下：

注意事项：

最常见的问题就是不能显示（没有反应），好像这个组件被隐藏了一样，折腾半天最后连组件长什么样都不知道，，，，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 2][]

这里放一个图，这是组件默认的样子，我放在了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>

效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 2][]

注意事项4：自定义组件图标等信息时，el-backtop组件支持插槽写法。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70]: /images/20210923/489c6edc62b74fecadfdab862f35fb90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 1]: /images/20210923/cc765ba095734c87b359188e70c5d214.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1bnRfZXI_size_16_color_FFFFFF_t_70 2]: /images/20210923/2ea2e6973b344db5a3d94afd7f17f16b.png