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

项目场景：vue页面或者网页全屏后，modal 弹框或者下拉框无法显示的问题

---

问题描述：

页面主体部分全屏后，页面中的所有弹窗和下拉框不能显示，退出全屏后，弹窗正常。原因：**项目主体全屏后，层级最高，弹出会被盖在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);
}