代码部分:
首先在created中监听窗口切换事件和键盘按下事件,在组件销毁之前移除监听:
beforeUnmount(){
window.removeEventListener('keydown', this.quit)
},
created(){
window.addEventListener('keydown', this.quit)
this.windowResizeEvent()
},
判断是否是全屏:
isFullScreen() {
return !! (
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
)
},
全局监听窗口切换事件:
windowResizeEvent(callback) {
window.onresize = ()=> {
if (this.resizeTimer) {
clearTimeout(this.resizeTimer);
}
this.resizeTimer = setTimeout(()=> {
if(!this.isFullScreen()){
this.$parent.$parent.showMenu = this.$parent.$parent.showTop = true
}
}, 100);
}
}
退出全屏事件:
quit(e){
let key = e.keyCode
if (key === 122) {
this.fullScreen()
e.preventDefault()
return
}
e.stopPropagation()
},
fullScreen(){
let element = document.documentElement;
if (this.isFullScreen()) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.$parent.$parent.showMenu = this.$parent.$parent.showTop = true
} 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.$parent.$parent.showMenu = this.$parent.$parent.showTop = false
}
},
网友评论