vue页面或者网页全屏后，modal 弹框或者下拉框无法显示

版权声明：本文为CSDN博主「时光荏苒、、、、、、、、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/woyaojinali/article/details/110958317

     说明：遇到了这个问题，仅为了记录~

原因：

页面主体部分全屏后，页面中的所有弹窗和下拉框不能显示，退出全屏后，弹窗正常。原因：**项目主体全屏后，层级最高，弹出会被盖在app层级下面，不管怎么设置z-index都无济于事，不能显示。

解决方案：

解决方案1：
只需要调用document.documentElement

// 全屏
requestFullscreen = (element) => {
  const element = element || document.documentElement// 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()
  }

解决方案2：
上面这种方法只能解决全屏框架用的。但是全屏某个页面的div，而div下面有日期下拉框，弹框之类的就不行了：下面是另一种方法：tooltip为 鼠标放上去的提示框

在需要触发tooltip的地方加一个@mouseOver事件，这个事件用emit触发父页面的append方法。
子组件：
 

<el-tooltip class="item" effect="dark" :content="name" placement="top">
  <div class="name" @mouseover="show()">{{ name }}</div>
</el-tooltip>
show() {
  this.$emit('showTooltip');
},

父页面(主要看自定义的方法)

<PDFViewer
  control="height"
  :src="currentPdfUrl"
  style="height:75vh;"
  ref="pdf"
  @showTooltip="showTooltip()"
></PDFViewer>

这里是要F12查看一下元素，根据自己项目的实际情况来写的。我的项目是全屏化了ref为fullScreen的div，所以我需要append的就是在this.$refs.fullScreen下面。
一定要加setTimeout并延迟100ms执行，否则第一次触发mouseover的时候，document.querySelector(’.el-tooltip__popper’)还获取不到，用nextTick也是获取不到。结果试了下用 setTImeout，延迟100ms就成功了！
 

showTooltip() {
  setTimeout(() => {
    console.log(this.$refs.fullScreen);
    if (document.querySelector('.el-tooltip__popper')) {
      this.$refs.fullScreen.appendChild(document.querySelector('.el-tooltip__popper'));
    }
  }, 100);
}