詳解vue.js實現(xiàn)全屏顯示功能示例
更新時間：2023年07月17日 14:34:58 作者：喜歡走彎路的人
這篇文章主要為大家介紹了vue.js實現(xiàn)全屏顯示功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
1、安裝vue-fullscreen
npm install vue-fullscreen
2、在mian.js中引用并注冊
import fullscreen from 'vue-fullscreen' Vue.use(fullscreen)
3、點擊按鈕上綁定fullscreen方法
data中定義：fullscreenFlag：false
fullscreen() {
????// 需要全屏顯示的dom元素
????let dom = document.getElementById('指定全屏的dom元素')
????????// 調(diào)用全屏方法?????
????????this.$fullscreen.enter(dom, {?
????????????wrap: false,
????????????callback: f => {
????????????????????this.fullscreenFlag = f??????
????????????}????
????????})???
?}全屏?xí)r彈框無法打開
點擊全屏按鈕時可以使用下面的方法：
data中定義：fullscreenFlag：false
? fullscreen(){
? ? ? let element = document.body //全屏的dom元素 如果不設(shè)置是body很多元素顯示不出來
? ? ? let titleBar = document.getElementsByClassName('titleBar')[0] //整體頭部元素 【刷新、最小化、最大化 關(guān)閉】
? ? ? // 判斷是否已經(jīng)是全屏
? ? ? // 如果是全屏，退出
? ? ? if (this.fullscreenFlag) {
? ? ? ? titleBar.style.display = "block" //控制某些元素，非全屏狀態(tài)下顯示或修改樣式
? ? ? ? if (document.exitFullscreen) {
? ? ? ? ? document.exitFullscreen();
? ? ? ? } else if (document.webkitCancelFullScreen) {
? ? ? ? ? document.webkitCancelFullScreen();
? ? ? ? } else if (document.mozCancelFullScreen) {
? ? ? ? ? document.mozCancelFullScreen();
? ? ? ? } else if (document.msExitFullscreen) {
? ? ? ? ? document.msExitFullscreen();
? ? ? ? }
? ? ? ? console.log('已還原！');
? ? ? } else { ? ?// 否則，進(jìn)入全屏
? ? ? ? titleBar.style.display="none" //? ?控制某些元素，全屏狀態(tài)下隱藏或修改樣式
? ? ? ? if (element.requestFullscreen) {
? ? ? ? ? element.requestFullscreen();
? ? ? ? } else if (element.webkitRequestFullScreen) {
? ? ? ? ? element.webkitRequestFullScreen();
? ? ? ? } else if (element.mozRequestFullScreen) {
? ? ? ? ? element.mozRequestFullScreen();
? ? ? ? } else if (element.msRequestFullscreen) {
? ? ? ? ? // IE11
? ? ? ? ? element.msRequestFullscreen();
? ? ? ? }
? ? ? ? console.log('已全屏！');
? ? ? }
? ? ? // 改變當(dāng)前全屏狀態(tài)
? ? ? this.fullscreenFlag = !this.fullscreenFlag;
? ? },以上就是詳解vue.js實現(xiàn)全屏顯示功能示例的詳細(xì)內(nèi)容，更多關(guān)于vue.js 全屏顯示功能的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue 實現(xiàn)圖片懶加載功能的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Vue中v-form標(biāo)簽里的:rules作用及定義方法
文章介紹了在Vue項目中使用ElementUI或ElementPlus組件庫時,如何通過`el-form`標(biāo)簽的`:rules`屬性進(jìn)行表單驗證,`:rules`屬性用于定義表單項的驗證規(guī)則,包括必填項、格式校驗、長度限制等,文章還展示了如何定義基本驗證規(guī)則和自定義驗證函數(shù),感興趣的朋友一起看看吧2025-03-03
這篇文章主要為大家詳細(xì)介紹了vue封裝一個日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue.js進(jìn)行查詢操作的實例詳解的相關(guān)資料,需要的朋友可以參考下2017-08-08
路由權(quán)限控制常用于后臺管理系統(tǒng)中，對不同業(yè)務(wù)人員能夠訪問的頁面進(jìn)行一個權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制，具有一定的參考價值，感興趣的可以了解一下2021-10-10
Vue中Element的table多選表格如何實現(xiàn)單選
這篇文章主要介紹了Vue中Element的table多選表格如何實現(xiàn)單選，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要給大家介紹了關(guān)于vue3中使用codemirror的詳細(xì)教程,CodeMirror是一款功能強大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進(jìn)、自動換行、獲取編輯文本、設(shè)置編輯文本、回退功能等多種實用效果,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue監(jiān)聽使用方法和過濾器實現(xiàn)，過濾器為頁面中數(shù)據(jù)進(jìn)行強化，具有局部過濾器和全局過濾器2022-06-06
在?Vuex?中,actions?的設(shè)計默認(rèn)只支持單個參數(shù)傳遞,這有時會限制我們的使用場景,下面我將詳細(xì)介紹幾種處理多參數(shù)傳遞的解決方案,從基礎(chǔ)到高級,幫助您靈活應(yīng)對各種需求,需要的朋友可以參考下2025-04-04
文章介紹了如何去掉Element UI中el-table組件自帶的邊框線,通常情況下,el-table沒有添加border屬性,但仍然會出現(xiàn)邊框線,可能的原因包括ElementUI的默認(rèn)樣式或表格的某些內(nèi)置樣式,感興趣的朋友跟隨小編一起看看吧2025-01-01