前言

最近在写本站的关于(About)页面,用到了Element Plus 的组件,其中在使用Backtop组件时遇到了不显示的问题,官方给的使用说明也不够清晰,故记录一下使用要点。

注:制作单一页面时,并没有建立Vue项目,仅仅只通过HTML标签引入全局变量 ElementPlus


操作

官方给出的示例代码如下:

1
2
3
4
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

仅单纯的复制这一行代码会发现,页面在向下滚动时,并未出现Backtop组件。

使用关键有两点:

  1. target属性一定要指向产生滚动条的组件。
  2. <el-backtop></el-backtop>一定要写于最外层块级区域的第一行,不可写于代码末尾。

示例如下:

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
33
34
35
36
37
38
39
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://unpkg.com/vue@next"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-plus"></script>
<title>About</title>
</head>
<body>

<div id="app" class="main_container" style="height:100%;overflow: auto;">
<el-backtop target=".main_container"></el-backtop> <!-- Backtop组件 -->
<!-- 其余代码 -->
<div class="container">
<div style="height: 2400px;"></div>
</div>
<div style="height: 2400px;"></div>
</div>

<script>
const App = {
data() {
return {

};
},
methods: {

}
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>

说明:

  • 最外层div添加overflow: auto;属性:必需时对象内容才会被裁切或显示滚动条。

  • 如果出现父子组件嵌套出现滚动条的情况,可以隐藏父组件滚动条,例如:

    1
    html { overflow-x: hidden; overflow-y: hidden; }

效果如下:


后记

参考文章:

为什么element的el-backtop会不管用,来看这里_aら 淼的博客-CSDN博客

vue中使用Element UI中的backTop组件-布布扣-bubuko.com