vue实现全屏功能

最新推荐文章于 2024-04-17 23:57:29 发布

原创最新推荐文章于 2024-04-17 23:57:29 发布 · 680 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

5 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何在 Vue 项目中实现全屏功能。通过监听全屏状态并使用浏览器提供的 API，如 `requestFullScreen` 和 `exitFullscreen`，可以在用户点击按钮时切换应用到全屏和退出全屏模式。代码简洁易懂，适用于需要全屏展示的场景。

vue实现全屏功能
在这里插入图片描述

方法如下。。。

toggle() {
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen()
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen()
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen()
					}
				} else {
					if (element.requestFullScreen) {
						element.requestFullScreen()
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen()
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen()
					} else if (element.msRequestFullscreen) {
						element.msRequestFullscreen()
					}
				}
				this.fullscreen = !this.fullscreen;
			},

实现之后效果展示

在这里插入图片描述