解决浏览器在局部区域全屏下，UI库部分弹窗组件无法正常显示的问题

场景

使用 screenfull.js 将特定区域局部全屏，全屏状态下，部分操作的弹框不见了。关闭全屏才能显示出来。

原因分析

UI库的组件是插入了body中，局部全屏状态下，把body界面覆盖，故无法正常显示。经测试，即使将其组件的层级改变为z-index:9999, 亦无法显示。

解决方案

我们不妨换个思路，既然直接将需要全屏的div节点传入screenfull中会导致弹框无法显示，不如就将body直接全屏，再通过改变CSS使这个div全屏显示，当取消全屏时，再将这个div恢复到原位置。

<!--isFull`为当前全屏状态，为布尔值-->
<div :class="{'full':isFull}" id="test">
 <!--内容-->
</div>                  

CSS
注意：full中z-index关键，必须小于弹框组件的默认z-index。看具体为多少。有些为2000

.full{
    position:fixed !important;
    z-index:200;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100% !important;
}

进页面初始化，监听全屏状态并赋值给isFull,isFull为true时，动态给div添加样式full

data(){
    return{
        isFull:false
    }
},
created(){
    this.init()
},
init(){
    if (screenfull.isEnabled) {
        screenfull.on('change',this.change)
    }
},
change(){
    this.isFull = screenfull.isFullscreen
    // console.log(this.isFull)
}, 

将body全屏，传入body节点

// 全屏
handleScreen() {
    //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏
    if (!screenfull.isEnabled) {
        return false
    }
    const bodyNode = document.querySelector('body')
    //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
    screenfull.toggle(bodyNode)
}, 

参考链接

https://blog.csdn.net/juhuagg/article/details/134930203