vue实现进入全屏和退出全屏

Zwq80235202023-12-13 14:58

最近一个项目需要进行大屏展示，所以登录完就要处于一个全屏的状态，当切换到控制台之后就可以退出全屏。在登录之后调用enterFullscreen方法，就可以进入全屏。在点击切换到控制台时，可以调用exitFullscreen方法。

javascript 复制代码

enterFullscreen() {
			const element = document.documentElement
			if (element.requestFullscreen) {
				element.requestFullscreen()
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen()
			} else if (element.webkitRequestFullscreen) {
				element.webkitRequestFullscreen()
			} else if (element.msRequestFullscreen) {
				element.msRequestFullscreen()
			}
		},

javascript 复制代码

exitFullscreen() {
			if (
				document.fullscreenElement ||
				document.webkitFullscreenElement ||
				document.mozFullScreenElement ||
				document.msFullscreenElement
			) {
				if (document.exitFullscreen) {
					document.exitFullscreen()
				} else if (document.webkitExitFullscreen) {
					document.webkitExitFullscreen()
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen()
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen()
				}
			}
		},