fix web端全屏后图标不跟随全屏状态更新的问题

This commit is contained in:
xuecong 2021-11-16 17:16:02 +08:00
parent 2602df52e1
commit f5bedbe367

View File

@ -178,9 +178,17 @@ export default {
this.onResize(); this.onResize();
window.addEventListener('resize', this.onResize, false); window.addEventListener('resize', this.onResize, false);
document.addEventListener('fullscreenchange', this.onFullScreenChange, false);
document.addEventListener('mozfullscreenchange', this.onFullScreenChange, false);
document.addEventListener('webkitfullscreenchange', this.onFullScreenChange, false);
document.addEventListener('msfullscreenchange', this.onFullScreenChange, false);
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener('resize', this.onResize); window.removeEventListener('resize', this.onResize);
document.removeEventListener('fullscreenchange', this.onFullScreenChange);
document.removeEventListener('mozfullscreenchange', this.onFullScreenChange);
document.removeEventListener('webkitfullscreenchange', this.onFullScreenChange);
document.removeEventListener('msfullscreenchange', this.onFullScreenChange);
}, },
methods: { methods: {
...mapActions({ ...mapActions({
@ -206,6 +214,15 @@ export default {
this.showMenu = true; this.showMenu = true;
}); });
}, },
onFullScreenChange() {
this.inFullScreen = !!(
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
);
},
updateCollapse() { updateCollapse() {
if (this.mediaQuery === 'xs') { if (this.mediaQuery === 'xs') {
this.updateMobileMenuVisible(); this.updateMobileMenuVisible();
@ -243,8 +260,6 @@ export default {
} else if (document.msExitFullscreen) { } else if (document.msExitFullscreen) {
document.msExitFullscreen(); document.msExitFullscreen();
} }
this.inFullScreen = false;
} else { } else {
const el = document.documentElement; const el = document.documentElement;
const rfs = const rfs =
@ -254,7 +269,6 @@ export default {
el.msRequestFullScreen; el.msRequestFullScreen;
rfs.call(el); rfs.call(el);
this.inFullScreen = true;
} }
}, },
logout() { logout() {