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, // 是否全屏
}
},
/** 全屏 */
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
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(); // 打开全屏
}
},
原文地址：https://blog.csdn.net/CuiCui_web/article/details/143686790
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！