调用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()
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。