場景

使用 screenfull.js 將特定區(qū)域局部全屏，全屏狀態(tài)下，部分操作的彈框不見了。關(guān)閉全屏才能顯示出來。

原因分析

UI庫的組件是插入了body中，局部全屏狀態(tài)下，把body界面覆蓋，故無法正常顯示。經(jīng)測試，即使將其組件的層級改變?yōu)閦-index:9999, 亦無法顯示。

解決方案

我們不妨換個(gè)思路，既然直接將需要全屏的div節(jié)點(diǎn)傳入screenfull中會(huì)導(dǎo)致彈框無法顯示，不如就將body直接全屏，再通過改變CSS使這個(gè)div全屏顯示，當(dāng)取消全屏?xí)r，再將這個(gè)div恢復(fù)到原位置。

<!--isFull`為當(dāng)前全屏狀態(tài)，為布爾值-->
<div :class="{'full':isFull}" id="test">
 <!--內(nèi)容-->
</div>                  

CSS
注意：full中z-index關(guān)鍵，必須小于彈框組件的默認(rèn)z-index?？淳唧w為多少。有些為2000

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

進(jìn)頁面初始化，監(jiān)聽全屏狀態(tài)并賦值給isFull,isFull為true時(shí)，動(dòng)態(tài)給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節(jié)點(diǎn)

// 全屏
handleScreen() {
    //screenfull.isEnabled  此方法返回布爾值，判斷當(dāng)前能不能進(jìn)入全屏
    if (!screenfull.isEnabled) {
        return false
    }
    const bodyNode = document.querySelector('body')
    //screenfull.toggle 此方法是執(zhí)行全屏化操作。如果已是全屏狀態(tài)，則退出全屏
    screenfull.toggle(bodyNode)
}, 

參考鏈接

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