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);
}

你可能感兴趣的:(html5,javascript,vue.js)