Element-ui 回到顶部组件不显示问题解决

一念格

于 2021-06-06 16:55:43 发布

阅读量2.9k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： Vue学习文章标签： vue elementui 前端

本文链接：https://blog.youkuaiyun.com/chenjun1992/article/details/117630814

Vue学习专栏收录该内容

5 篇文章

订阅专栏

在尝试使用Element-ui的backtop组件时遇到显示问题。原代码中，backtop组件的target属性可能导致问题。根据资料，backtop组件应位于最外层div的第一个位置，并且不需要target属性。调整后的代码已移除target属性并正确放置组件，但仍然未显示。可能需要进一步检查其他代码冲突或样式覆盖问题。

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

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>

问题一：
搜查了一些资料得知，backtop组件代码不能放在尾部，要放在最外层的div里的第一个。

问题二：
但是我移动代码的位置后，仍然没有显示，需要将自定义代码中target=".page-component__scroll .el-scrollbar__wrap"这段去掉。

修改后代码：

<template>
  <div>
  <el-backtop :bottom="60">
    <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>
  
  <!--自己的一些前端代码-->
  
  </div>
  </template>