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