使用 element ui官网 回到顶部不显示问题解决

使用element ui 的回到顶部插件的时候出现不显示，功能不能使用的情况下写出这篇文章，

使用之前（这种情况下根本不显示效果）

<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :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;
      }"
    >
      UP
    </div>
  </el-backtop>
</template>

//这样的情况下根本不显示，

修改之后

<template>
  <div>
  //这个是为了顶出滚动条 ，才能显示 UP 这个插件
    <div class="boxtext">

    </div>
    //只需要下面这一段就可以实现了
    <div>
         <el-backtop :visibility-height="0"><div>UP</div></el-backtop>
    </div>
  </div>
</template>

<style scoped>
.boxtext {
  height: 9000px;
}
.upbox {
  height: 100px;
  width: 100px;
  background-color: #ff0000;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
}
</style>

完结