前言:有些时候遇到bug与其把事情想得复杂,还不如回去看看官方文档。
做系统难免会遇到要做到全屏查看的需求,以下即为全屏代码的实现。
<template>
<div>
<div>测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏测试全屏</div><button type="button" @click="btnFull">全屏</button>
<div id="full">
I am full screen content;
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
fullscreen:false
};
},
methods: {
// 全屏事件
handleFullScreen() {
let element = document.getElementById("full");//放大的元素,如果整个系统放大,直接赋值 document.documentElement
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
btnFull(){
this.fullscreen = false;
this.handleFullScreen();
}
}
};
</script>
<style scoped>
#full{
height:400px;
width:100%;
background:red;
color:#fff;
}
</style>
有时候可能会加入一个放大缩小图片,通过点击全屏图标显示全屏,此时图标变为退出全屏,当手动按ESC或者点击浏览器自带的退出全屏按钮时候,图标不会相应的改变,因此需要监听窗口是否全屏,通过加入resize事件,如下:
window.addEventListener("resize", function() {
var isFull = document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
if (isFull === undefined) {isFull = false;}
if(isFull){this.fullscreen=true;}else{this.fullscreen=false;}
return isFull;
});
图标代码如下
<i :class="fullscreen?'iconfont icon-full':'iconfont icon-mini'" @click="fullscreen"></i>
当一切都完美搞定时候,当你dom里面包含了el-select元素,放大后会发现select下拉项居然没显示出来,但是查看控制台发现dom元素实际上还是存在的,偶就遇到了这个问题,还卡了一个加班夜晚。不出现原因:这页面里是将full内的元素全屏化,mask与dropdown都是append在body的最下面,并没有包含在full内部,所以显示不出来。解决方法:将el-select属性popper-append-to-body设置为false,即:
<el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
<el-option>.....
</el-option>
</el-select>
解决方法来源于github上大神的点醒https://github.com/ElemeFE/element/issues/12872
附加:如上述不满足需求,需监听F11,Esc按键,参考大神链接https://www.cnblogs.com/scot/p/5552051.html