vue實現(xiàn)進入全屏和退出全屏的示例代碼
更新時間：2023年12月13日 14:55:20 作者：Zwq8023520
最近一個項目需要進行大屏展示,所以登錄完就要處于一個全屏的狀態(tài),本文主要介紹了vue實現(xiàn)進入全屏和退出全屏的示例代碼,具有一定的參考價值,感興趣的可以了解一下
最近一個項目需要進行大屏展示，所以登錄完就要處于一個全屏的狀態(tài)，當(dāng)切換到控制臺之后就可以退出全屏。在登錄之后調(diào)用enterFullscreen方法，就可以進入全屏。在點擊切換到控制臺時，可以調(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實現(xiàn)進入全屏和退出全屏的示例代碼的文章就介紹到這了,更多相關(guān)vue 進入全屏和退出全屏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)自定義全局右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
ant design vue嵌套表格及表格內(nèi)部編輯的用法說明
這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue.js使用axios動態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動態(tài)獲取response里的data數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
VUE安裝依賴時報錯:npm ERR! code ERESOLVE的解決
在使用npm安裝項目依賴時,有時會遇到錯誤信息 “npm ERR! code ERESOLVE”,本文就來介紹一下VUE安裝依賴時報錯的解決,具有一定的參考價值,感興趣的可以了解一下2023-10-10
vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)
這篇文章主要介紹了vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)，詳細(xì)的介紹了整個項目的目錄以及目錄文件的用法，非常具有實用價值，需要的朋友可以參考下2019-01-01
下面小編就為大家分享一篇vue2.0模擬錨點的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue Element前端應(yīng)用開發(fā)之常規(guī)Element界面組件
在我們開發(fā)BS頁面的時候，往往需要了解常規(guī)界面組件的使用，小到最普通的單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展示、彈出對話框、表單處理、條碼二維碼等等，本篇隨筆基于普通表格業(yè)務(wù)的展示錄入的場景介紹這些常規(guī)Element組件的使用2021-05-05
這篇文章主要為大家介紹了前端vue架構(gòu)插槽slot使用教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-02-02
vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決
這篇文章主要介紹了vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Vue3使用transition實現(xiàn)組件切換的過渡效果
<Transition> 是一個內(nèi)置組件,這意味著它在任意別的組件中都可以被使用,無需注冊,它可以將進入和離開動畫應(yīng)用到通過默認(rèn)插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實現(xiàn)組件切換的過渡效果,需要的朋友可以參考下2024-09-09