说明:
-
实测可以在谷歌、火狐、360 浏览器使用
-
解决了在浏览器全屏下监听不到键盘Esc事件
-
解决了取消全屏和全屏的同步问题,ESC按键下可以同步
实例:
<!--html-->
<!-- 全屏显示 -->
<div class="btn-fullscreen" @click="handleFullScreen">
<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
<i class="el-icon-rank"></i>
</el-tooltip>
</div>
//
data() {
return {
fullscreen: false, // 全屏状态 true为全屏 false反之
}
},
created(){
window.onresize = ()=> {
if(!this.checkFull()){
// 退出全屏后要执行的动作
console.log("退出全屏")
this.fullscreen = false;
}
}
},
methods:{
// 判断全屏
checkFull(){
//判断浏览器是否处于全屏状态 (需要考虑兼容问题)
//火狐浏览器
var isFull = document.mozFullScreen||
document.fullScreen ||
//谷歌浏览器及Webkit内核浏览器
document.webkitIsFullScreen ||
document.webkitRequestFullScreen ||
document.mozRequestFullScreen ||
document.msFullscreenEnabled
if(isFull === undefined) {
isFull = false
}
return isFull;
},
}