當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue中如何实现全全全屏和退出全屏？

發布時間：2023/12/3 vue 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue中如何实现全全全屏和退出全屏？小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

“

大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂

”

最近總有人給我說ta有社恐，明明是有社牛好不好……

前言

在做大屏界面的時候，客戶有個要求，一進去登錄成功之后，要有全屏的功能，全屏指的是瀏覽器地址欄什么的都需要去掉……相當于和按f11一樣的效果，于是就開始寫~

代碼實現

首先安裝個依賴，代碼如下：

npm install --save screenfull

在需要全屏的頁面引入，代碼如下：

import?screenfull?from?"screenfull";

html的頁面代碼，集全屏的按鈕，我這邊寫的是全屏的圖標，代碼如下：

svg-icon為全屏的圖標，當前頁面已經是全屏時，圖標就換成退出全屏的，否則還是全屏的圖標。

click為全屏的點擊事件。

因為我這邊的全屏圖標是在導航欄上，所以我需要通過路由的方式，跳轉至需要全屏的界面。全屏的點擊事件如下：

methods:?{click()?{//去大數據指揮中心駕駛艙//tag:區分是否要全屏顯示//ismsg：給子組件里面傳遞的，看看是不是寬度要加200this.$router.push({?path:??"/dsjzhzx",query:?{tag:true,ismsg:true},replace:?true?}).catch(()=>{});/*?location.href="/yuetanhuizong";*//*if?(!screenfull.isEnabled)?{this.$message({?message:?'你的瀏覽器不支持全屏',?type:?'warning'?})return?false;}screenfull.toggle();*/}, }

在route下面的index.js中配置如下：

{path:?'/dsjzhzx',component:?(resolve)?=>?require(['@/views/system/yuetanhuizong/index'],?resolve),hidden:?true},

最后在需要全屏的頁面寫如下代碼：

mounted()?{window.addEventListener("scroll",?this.getScroll);//默認進來不全屏this.tag?=?this.$route.query.tag;this.isxianshi?=?this.$route.query.isxianshi;if(this.tag)?{this.timer?=?setTimeout(()?=>?{???//設置延遲執行this.ceshiClick();},?100);}}methods:?{//全屏ceshiClick()?{this.isFullScreen?=?!this.isFullScreen;this.isxianshi?=?false;screenfull.toggle();}, }

順便說一下退出全屏吧，HTML中的代碼如下：

vue中的代碼如下：

//退出全屏tuichuquanping()?{this.$router.push({path:?"/tuichu",?query:?{tag:?false,ismsg:false,isxianshi:false,kuan:this.windowWidth},?replace:?true}).catch(()?=>?{});},

全屏的圖標：

退出全屏的圖標：

image-20211201180748713

總結

以上是生活随笔為你收集整理的vue中如何实现全全全屏和退出全屏？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。