问题描述:
element-ui 的Backtop属性中有target的值是需要设置的。设置错了,不仅没有效果,反而还可以导致报错。
官方文档说明的是,target
触发滚动的对象,String类型。
查看示例,是传一个css选择符。
查看官方源码,我们会发现,
init() {
this.container = document;
this.el = document.documentElement;
if (this.target) {
this.el = document.querySelector(this.target);
if (!this.el) {
throw new Error(`target is not existed: ${this.target}`);
}
this.container = this.el;
}
},
target是有默认值的,默认值是document.documentElement对象。我们传入一个css选择器进去后,就会替换为document.querySelector(this.target)选择的dom节点。
废话不多说,重点说一下解决方法。
解决方案一:什么都不传,用默认值。
<template>
<div class="appmain-wrap">
<!-- 返回顶部 -->
<el-backtop></el-backtop>
<!-- 其他代码-->
</template>
这个时候,backtop拿到的是document.documentElemen
t对象,它上面有滚动条就会触发返回顶部。
解决方案二:传入正确的target的值。
譬如我是在一个tabs页面使用的示例。
<template>
<div class="appmain-wrap">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理
<el-backtop target=".appmain-wrap"></el-backtop>
<!-- 其他代码-->
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
</el-tabs>
</div>
</template>
这个时候,还是不行,需要给.appmain-wrap
加一个样式
.appmain-wrap {
height: 100vh;
overflow: scroll;
}
给这个target的壳,设置height
高度,然后设置overflow:scroll
,这样才可以。