vue 中对监听esc事件,退出全屏的问题解决
vue 的项目中使用了 h5 的全屏 API,在使用esc键退出全屏时,默认调用“ document.exitFullScreen() ” 直接退出,想要做监听并设置业务,需要监听屏幕size变化来出发事件mounted() {let that = thiswindow.addEventListener('resize', function () {if (!that.isFullScreen()
·
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")); //要设置全屏的元素
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)