el-backtop 不显示问题
问题描述
官方文档的示例如下：
1
2
3
4
| <template>
Scroll down to see the bottom-right button.
<el-backtop :right="100" :bottom="100" />
</template>
|
直接拿来用会发现返回顶部的按钮根本不显示，这是因为 target 属性是必填的。
target 是指触发滚动的对象，其值是一个类的字符串，该类对应的元素一般是 el-backtop 的父元素，且其能够发生滚动，即拥有以下属性：
1
2
3
4
5
6
| height: 200px;
// 或
max-height: 200px;
// 或
flex: 1;
overflow: auto;
|
应用场景
普通的 div 块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<body>
<div class="box">
<el-backtop :visibility-height="100" target=".box" />
...
</div>
</body>
<style>
.box {
height: 200px;
overflow: auto;
}
</style>
</html>
|
1
2
3
4
| <el-scrollbar>
<el-backtop :visibility-height="100" target=".el-scrollbar__wrap" />
...
</el-scrollbar>
|
1
2
3
4
5
6
7
8
9
10
11
| <el-menu
style="height: 100%;"
active-text-color="#409eff"
background-color="#373f4a"
text-color="#dadada"
router
:collapse="isCollapse"
:default-active="$route.path"
>
<menu-bar-item :routes="routes" />
</el-menu>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| .el-menu-hover-bg-color {
background-color: rgba(0, 0, 0, 0.2) !important;
}
.el-menu {
user-select: none;
border-right: none !important;
// --el-menu-item-font-size: 15px;
&:not(.el-menu--collapse) {
width: 225px;
}
.icon {
margin-right: 8px;
font-size: 16px;
width: 18px;
}
}
.el-menu--collapse {
width: auto !important; // 解决折叠时宽度不跟随问题
}
.el-menu-item {
height: 56px !important;
line-height: 56px !important;
}
.el-menu-item.is-active,
.el-menu-item:hover,
.el-sub-menu.is-active .el-sub-menu__title,
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
@extend .el-menu-hover-bg-color;
}
.el-sub-menu.is-active.is-opened .el-sub-menu__title {
background-color: unset !important;
}
|
设置 :collapse-transition="false"，通过 el-menu 父元素宽度变化添加过渡效果。