詳解vue.js實現(xiàn)全屏顯示功能示例

更新時間：2023年07月17日 14:34:58 作者：喜歡走彎路的人

這篇文章主要為大家介紹了vue.js實現(xià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??????
????????????}????
????????})???
?}

全屏時彈框無法打開

點擊全屏按鈕時可以使用下面的方法：

data中定義：fullscreenFlag：false

 ? fullscreen(){
? ? ? let element = document.body //全屏的dom元素 如果不設置是body很多元素顯示不出來
? ? ? let titleBar = document.getElementsByClassName('titleBar')[0] //整體頭部元素 【刷新、最小化、最大化 關閉】
? ? ? // 判斷是否已經(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 { ? ?// 否則，進入全屏
? ? ? ? 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('已全屏！');
? ? ? }
? ? ? // 改變當前全屏狀態(tài)
? ? ? this.fullscreenFlag = !this.fullscreenFlag;
? ? },

以上就是詳解vue.js實現(xiàn)全屏顯示功能示例的詳細內(nèi)容，更多關于vue.js 全屏顯示功能的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: