页面某个元素全屏展示，分页组件的页面条数弹框不显示

最新推荐文章于 2024-05-28 08:45:12 发布

weixin_44423850

最新推荐文章于 2024-05-28 08:45:12 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html vue 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44423850/article/details/126401947

html 同时被 2 个专栏收录

13 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

当全屏展示时遇到弹框显示异常，通常是由于弹框被其他元素覆盖。解决方案包括为分页组件添加独立样式以防止样式污染，并尝试将弹框置于全屏元素内。如果仍无法显示，可以考虑使用绝对定位来调整弹框的位置。文中通过screenfull插件实现全屏，并通过调整CSS解决了弹框层级覆盖的问题。

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

全屏展示，弹框不显示，关掉全屏展示后，弹框显示正常，则是由于层级的原因，弹框被覆盖掉了

解决方案

1、给分页的popoper添加样式，避免样式的污染

<el-pagination
                v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                background
                layout="sizes, prev, pager, next"
                :total="total"
                popper-class="pageClass"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />

将弹出框添加进要全局展示的div里，我这里使用的是screenfull插件进行全局展示，以下命令进行安装

npm install screenfull --save

 <el-container id="tableId" >
 </el-container>

  const screenClick = () => {
    if (!screenfull.isEnabled) {
      return false
    }
    let element = document.getElementById('tableId')
    setTimeout(() => {
      if (document.querySelector('.pageClass')) {
        element.appendChild(document.querySelector('.pageClass'))
      }
    }, 100)

    console.log('element', element)
    screenfull.request(element)
    // screenfull.toggle()
  }

我这样写了之后在全屏展示的状态下，弹框还是没有出现，我想可能是依赖的底层原因

那就给弹出框加个绝对定位试试看，果然成功了