为什么element的el-backtop会不管用,来看这里!

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

把target指向你要产生“回到顶部”按钮的组件,
这个组件一定要是产生滚动条的组件!
这个组件一定要是产生滚动条的组件!
这个组件一定要是产生滚动条的组件!

举个栗子,App.vue中的栗子

<template>
  <div id="app" class="wrapper" style="height:520px;overflow: auto;">
    <div class="wrapper-content" style="height:2020px;background-color:aliceblue;text-align:center;position:relative;">
      <!-- 回到顶部 -->
      <template>
        <el-backtop target=".wrapper-content"></el-backtop>
      </template>

      <div>顶部</div>
      <div style="position:absolute;bottom:0;left:49%;">底部</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
html,body,#app {
  height: 100%;
}
</style>

这样是不会产生按钮的,因为wrapper-content组件不会产生滚动条,更不会有滚动事件,要把target改成 target=".wrapper",因为真正产生滚动事件的是wrapper。

注意这句样式:

 <div id="app" class="wrapper" style="height:520px;overflow: auto;">

要给父组件overflow: auto,和高度,否则父组件会被自动撑开,不产生滚动事件(如果有滚动条那也是上级的,如果上级一直没有设置height那就是window的);把520px设置为100%也是没有用的,可以用document.body.offsetHeight这个方法设置适合屏幕的高度;若不想设置具体高度则加上下面这句样式,把上级高度全部100%也是管用的

html,body,#app {height: 100%;}

附上官网介绍
为什么element的el-backtop会不管用,来看这里!_第1张图片

  • target最好用id,因为唯一
  • template必不可少
  • 使用target以外的属性时一定要用冒号(v-bind),因为它接收的是数字,不用冒号只能传字符串,如
<el-backtop target=".wrapper" :visibility-height="200" :right="40" :bottom="40"></el-backtop>

你可能感兴趣的:(vue,组件,前端)