前言
官网里面这个Backtop 回到顶部组件使用写的很简单,就这样
我们实际上使用这个组件,target对象是内容滚动的外部容器,并且这个容器的高度是100%是撑满整个屏幕的,写了个具体demo例子如下:
<template>
<!-- 外部容器 -->
<div class="back-top-container">
<!-- 实际滚动内容 -->
<div v-for="(item,i) in 150" :key="i">这是文本{
{ i }}</div>
<!-- Backtop 回到顶部组件 -->
<el-backtop target=".back-top-container" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
margin-right:100px;
}"
>
UP
</div>
</el-backtop>
</div>
</template>
<style lang="scss" scoped>
.back-top-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
</style>