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

在这里插入图片描述

最优方案

: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;
}

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

 <!--  全屏按钮  -->
<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>
      }
    },

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

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(); // 打开全屏
      }
    },