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

全屏模式下弹框不展示的原因是elementUI的弹框我们让他挂在body中了，而我们全屏的div盒子不是整个文档，这时候就找不到弹框了。
当我们把弹框改为插入到父元素上

这时候会出现蒙层盖住整个页面，什么也点不了的问题。 这是elementUI官方的一个bug，
解决方案，需把父弹框挂在body中。这时候就有点无解了。
这个多级嵌套问题之前写过一篇文章解决，链接：解决多层弹框嵌套蒙层遮住问题超链接

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

最优方案

实现思路，利用样式，使用当前的这个大屏页面的盒子脱离文档流； 全屏的时候使body全屏，而不是当前大屏页面的大盒子。
给大屏页面的盒子加上动态样式， 高宽都设置铺满，这样就盖住了layout部分了。

: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, // 是否全屏
    }
 }