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

最新推荐文章于 2024-07-17 08:37:25 发布

北【辰】、

最新推荐文章于 2024-07-17 08:37:25 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：官网使用element ui 回到顶部解决 js css

本文链接：https://blog.youkuaiyun.com/qq_44803640/article/details/117398211

js 同时被 3 个专栏收录

10 篇文章

订阅专栏

官网使用element ui 回到顶部解决

2 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文讲述了如何解决Element UI回顶部组件在初始状态下不显示的问题，通过调整模板结构和设置`visibility-height`属性，确保了插件在需要时正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网使用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>