调用requestFullscreen使dom全屏时,element组件被隐藏

时间:2020-8-21 作者:admin

调用requestFullscreen使dom全屏时,element组件被隐藏
这个声音的组件我用的时elementUI的组件,未全屏时,正常显示。

调用requestFullscreen使dom全屏时,element组件被隐藏

当我使其父DOM全屏时,该音量条被覆盖,层级设置多高都没用。

调用requestFullscreen使dom全屏时,element组件被隐藏

原因:

所用到的组件为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()
  }
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。