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

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

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()
			}
		},
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()
				}
			}
		},

Vue实现组件全屏显示的方法有两种。第一种方法是使用F11键切换全屏,这是一种浏览器原生支持的方式。用户可以按下F11键来切换全屏显示。第二种方法是使用requestFullscreen()方法来实现全屏显示。但需要注意以下几点: 1. document下没有requestFullscreen方法。 2. requestFullscreen方法只能由用户触发,不能在onload事件中触发。 3. 在页面跳转之前,需要先退出全屏。 4. 进入全屏后,元素将脱离其父元素,可能导致之前某些CSS的失效。为解决这个问题,可以使用:full-screen伪类为元素添加全屏时的样式。 5. 如果一个元素A全屏后,其子元素也要全屏,需要先让元素A退出全屏。 在Vue中,可以在组件中使用以下代码来实现全屏显示: ```javascript import screenFull from 'screenfull'; // 导入screenFull库 // 在组件中定义一个方法来实现全屏切换 const handleFullscreen = () => { if (screenFull.isEnabled) { // 判断浏览器是否支持全屏 screenFull.toggle(); // 切换全屏状态 } } // 在需要全屏显示的组件中,可以通过点击事件或其他触发方式调用handleFullscreen方法 ``` 以上代码中,我们首先导入了screenFull库,然后定义了一个方法handleFullscreen来切换全屏状态。在需要全屏显示的组件中,可以通过点击事件或其他触发方式调用handleFullscreen方法来实现全屏显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue 组件化-全屏](https://blog.csdn.net/m0_71933813/article/details/129226033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue全屏组件](https://blog.csdn.net/hjh15827475896/article/details/123370093)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zwq8023520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值