快捷導(dǎo)航

vue實(shí)現(xiàn)進(jìn)入全屏和退出全屏的示例代碼

更新時(shí)間：2023年12月13日 14:55:20 作者：Zwq8023520

最近一個(gè)項(xiàng)目需要進(jìn)行大屏展示,所以登錄完就要處于一個(gè)全屏的狀態(tài),本文主要介紹了vue實(shí)現(xiàn)進(jìn)入全屏和退出全屏的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下

最近一個(gè)項(xiàng)目需要進(jìn)行大屏展示，所以登錄完就要處于一個(gè)全屏的狀態(tài)，當(dāng)切換到控制臺(tái)之后就可以退出全屏。在登錄之后調(diào)用enterFullscreen方法，就可以進(jìn)入全屏。在點(diǎn)擊切換到控制臺(tái)時(shí)，可以調(diào)用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()
				}
			}
		},

到此這篇關(guān)于vue實(shí)現(xiàn)進(jìn)入全屏和退出全屏的示例代碼的文章就介紹到這了,更多相關(guān)vue 進(jìn)入全屏和退出全屏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue使用iframe嵌入網(wǎng)頁的示例代碼
本篇文章主要介紹了vue使用iframe嵌入網(wǎng)頁的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
vuedraggable實(shí)現(xiàn)簡單拖拽功能
這篇文章主要為大家詳細(xì)介紹了vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue實(shí)現(xiàn)flv格式視頻播放效果
這篇文章主要介紹了vue實(shí)現(xiàn)flv格式視頻播放,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
vue3使用ref的性能警告問題
這篇文章主要介紹了vue3使用ref的性能警告問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解Vue.js項(xiàng)目API、Router配置拆分實(shí)踐
這篇文章主要介紹了詳解Vue.js項(xiàng)目API、Router配置拆分實(shí)踐,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例
今天小編就為大家分享一篇vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
使用vue2實(shí)現(xiàn)帶地區(qū)編號(hào)和名稱的省市縣三級(jí)聯(lián)動(dòng)效果
我們知道省市區(qū)縣都有名稱和對(duì)應(yīng)的數(shù)字唯一編號(hào)，使用編號(hào)可以更方便查詢以及程序處理，我們今天來了解一下使用vue2來實(shí)現(xiàn)常見的省市區(qū)下拉聯(lián)動(dòng)選擇效果,需要的朋友可以參考下
2018-11-11
使用vue-virtual-scroller遇到的問題及解決
這篇文章主要介紹了使用vue-virtual-scroller遇到的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法
這篇文章主要介紹了vue 項(xiàng)目中實(shí)現(xiàn)按鈕防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-12-12
Vue實(shí)現(xiàn)跑馬燈簡單效果
這篇文章主要為大家詳細(xì)介紹了Vues實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10