vue中调用全屏方法、 elementUI弹框在全屏模式下不出现问题、多级嵌套弹框蒙层遮挡问题等处理与实现方案

全屏模式下弹框不展示的原因是elementUI的弹框我们让他挂在body中了,而我们全屏的div盒子不是整个文档,这时候就找不到弹框了。

当我们把弹框改为插入到父元素上

这时候会出现蒙层盖住整个页面,什么也点不了的问题。 这是elementUI官方的一个bug,

解决方案,需把父弹框挂在body中。这时候就有点无解了。

这个多级嵌套问题之前写过一篇文章解决,链接:解决多层弹框嵌套蒙层遮住问题超链接

先介绍最优的方案,然后再介绍一种不太好的方案(为啥说不好呢,因为它是操作dom,会导致只要切换全屏、退出全屏,整个页面就进行重排重绘)

最优方案

实现思路,利用样式,使用当前的这个大屏页面的盒子脱离文档流; 全屏的时候使body全屏,而不是当前大屏页面的大盒子。

给大屏页面的盒子加上动态样式, 高宽都设置铺满,这样就盖住了layout部分了。

javascript 复制代码
:class="{ 'fullMapWrapper': isFullScreen }"

// 全屏外层div
.map-wrapper.fullMapWrapper {
  position: fixed !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1500 !important;
  top: 0 !important;
  left: 0 !important;
}

全屏,退出全屏部分的代码

javascript 复制代码
 <!--  全屏按钮  -->
<div class="fullMap"><i class="el-icon-full-screen" @click="fullMap()"></i></div>

data() {
    return {
      isFullScreen: false, // 是否全屏
    }
 },

/** 全屏 */
    fullMap() {
      this.isFullScreen = !this.isFullScreen;
      //判断是否处于全屏模式
      if(document.fullscreenElement) {
        //退出全屏
        document.exitFullscreen();
        this.isFullScreen = false;
        //处于全屏模式的元素
        // console.log(document.fullscreenElement);   //null
      }else {
        //全屏显示, 让body全屏
        document.body.requestFullscreen();
        this.isFullScreen = true
        //处于全屏模式的元素
        // console.log(document.fullscreenElement);   //<html lang="en">......</html>
      }
    },

这样就完美解决的问题,也没后遗症。

下面说下另外一个不好方案的思路, 就是创建一个新元素, 手动的把当前的大屏的dom节点append到新元素上,

再讲新元素append到body里达到这个目的。 (但是我们会发现,appendChild这个是移动dom节点,

第一次切换全屏,再切换来,会发现页面空白。原本的dom跑了) 这样我们只能频繁的去append dom节点。页面就反复进行重绘重排

这个全屏是基于大屏的div

javascript 复制代码
let parentDom = null
let mapDiv = null

 mounted() {
    parentDom = document.createElement('div'); // 创建一个新的元素
    mapDiv = document.getElementById('map-wrapper')
    parentDom.id = 'bodyDiv'
    parentDom.classList.add("parent-div");
    parentDom.style.height = '100%'
    parentDom.style.width = '100%'
    parentDom.appendChild(mapDiv)
    document.body.appendChild(parentDom) // 将元素添加到body中
    parentDom.style.display = 'none'
     // 这个是当前大屏页面的上一个盒子
    document.getElementsByClassName('main-container-box')[0].appendChild(mapDiv)
  },

方法
/** 全屏 */
    fullMap() {
      this.isFullScreen = !this.isFullScreen;

       if(document.fullscreenElement) { // 全屏模式
         let bodyDiv = document.getElementById('bodyDiv')
        if(bodyDiv) {
           bodyDiv.style.display = 'none'
        }
         document.getElementById('app').style.display = 'block'
         // 这个是当前大屏页面的上一个盒子
         document.getElementsByClassName('main-container-box')[0].appendChild(mapDiv)
         //   //退出全屏
         document.exitFullscreen(); // 退出全屏
       } else {
         document.getElementById('app').style.display = 'none'
         parentDom.appendChild(mapDiv)
         parentDom.style.display = 'block'
         document.body.requestFullscreen(); // 打开全屏
      }
    },
相关推荐
开心工作室_kaic13 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā13 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js