vue页面或者网页全屏后,modal 弹框或者下拉框无法显示的问题
项目场景:vue页面或者网页全屏后,modal 弹框或者下拉框无法显示的问题问题描述:页面主体部分全屏后,页面中的所有弹窗和下拉框不能显示,退出全屏后,弹窗正常。原因:项目主体全屏后,层级最高,弹出会被盖在app层级下面,不能显示。解决方案:只需要调用document.documentElement// 全屏requestFullscreen = (element) => {const el
项目场景: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);
}
更多推荐
所有评论(0)