调用 requestFullscreen 使 dom 全屏时,element 组件被暗藏
这个声音的组件我用的时 elementUI 的组件,未全屏时,失常显示。
当我使其父 DOM 全屏时,该音量条被笼罩,层级设置多高都没用。
起因:
所用到的组件为 element 的组件,该弹窗组件会生成在 body 中,和我的项目主体 app 为平行关系,我的项目主体全屏后,层级最高,弹出会被盖在 app 层级上面,不能显示。
解决办法:
不要使某个元素全屏,使整个 document 全屏,就不会被笼罩,因为主动生成的要显示组件和 body 同级。
相干代码:
// 全屏
requestFullscreen = (element) => {
const element = element || document.documentElement
if (element.requestFullscreen) {element.requestFullscreen()
} else if (element.msRequestFullscreen) {element.msRequestFullscreen()
} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen()
}
}
// 退出全屏
exitFullscreen = () => {if (document.exitFullscreen) {document.exitFullscreen()
} else if (document.msExitFullscreen) {document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen()
}