记录一下el-backtop的使用方法

参考了Element-UI 回到顶部el-backtop组件踩坑记 - 掘金 (juejin.cn)这位的文章

<template>
  <div id="app">
     <div class="content">
       <div class="backtop"></div>
       <el-backtop target=".content .backtop"></el-backtop>
     </div>
  </div>
</template>  

<style>
html,body {
  height: 100%;
}
#app {
 height: 100%;
}
.content {
   height: 100%;
} 
.backtop {
    overflow: scroll;
    height: 100%;
} 
</style>

作者：qwxying
链接：https://juejin.cn/post/6844904181954773006
来源：稀土掘金

这里贴出他的使用方法，详细可以参考原作者的文章。

<el-main class="content">
   <!--返回顶端,用到了两个参数-->
   <el-backtop target=".content .backtop"></el-backtop>
   <!--需要滚动的内容,这里是路由占位符,会有不同的页面进行切换-->
   <router-view class="backtop"></router-view>
</el-main>

<style>
.content {
  height: 100%;
}

.backtop {
  overflow: scroll;
  height: 100%;
}
</style>

这里贴出我的使用方法,这个应该之后会用到很多，顺便做个记录，实际使用只需要.content或者.backtop中的一个写入target即可。

<el-main>
  <!--返回顶端,只需要定义了滚动条的backtop-->
  <el-backtop target=".backtop"></el-backtop>
  <!--需要滚动的内容,这里是路由占位符,会有不同的页面进行切换-->
  <router-view class="backtop"></router-view>
</el-main>

<el-main  class="content">
  <!--返回顶端,用到了两个参数-->
  <el-backtop target=".content"></el-backtop>
  <!--需要滚动的内容,这里是路由占位符,会有不同的页面进行切换-->
  <router-view></router-view>
</el-main>

这两种方式都是可以的,但是把content这个不带滚动属性的样式给同样不带滚动属性的router-view是不行的,也就是说el-backtop必须用target绑定一个可以滚动的结构。在这里的el-main可以看作是一个包含滚动条属性的结构，所以不需要backtop样式中的scroll。

不过这个东西依靠样式绑定目标的实现方式是真奇怪，但是我对这个接触不多以能用就行为标准，具体原理深究交给其他人吧。