vue 的项目中使用了 h5 的全屏 API，在使用esc键退出全屏时，默认调用“ document.exitFullScreen() ” 直接退出，想要做监听并设置业务，需要监听屏幕size变化来出发事件
mounted() {
let that = this
window.addEventListener('resize', function () {
if (!that.isFullScreen()) {
// 非全屏状态
//业务逻辑
}
});
}
下面是全屏的完整代码
methods: {
//全屏
fullele() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
null
);
},
//判断是否全屏
isFullScreen() {
return !!(document.webkitIsFullScreen || this.fullele());
},
//退出全屏
exitFullscreen() {
this.fullScreenFlag = false;
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
//全屏
full(ele) {
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
},
//切换是否全屏 全屏按钮要执行的方法
toggleFullScreen() {
if (this.isFullScreen()) {
this.exitFullscreen();
} else {
this.fullScreenFlag = true;
this.full(document.getElementById("dataMointor")); //要设置全屏的元素
}
}
}
标签：vue,监听,ele,esc,全屏,else,document From： https://www.cnblogs.com/mmzuo-798/p/17148861.html