vue element-ui導航實現(xiàn)全屏/取消全屏功能
更新時間：2024年08月28日 08:44:43 作者：IT博客技術分享
這篇文章主要介紹了vue element-ui導航實現(xiàn)全屏/取消全屏功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
element-ui導航實現(xiàn)全屏/取消全屏功能
先上效果圖
html部分代碼：
<!-- 全屏 -->
<span class="user" @click="toggleFullScreen">
<el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏':'全屏'" placement="bottom">
<i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'"
style="width: 1.6rem;height: 1.6rem;vertical-align:middle;margin-right: .6rem;margin-bottom: .5rem;font-size:2rem"></i>
</el-tooltip>
</span>data()定義部分：
return{
isFullScreen: false, //全屏開關
}js方法：
//全屏設置
toggleFullScreen () {
if (this.canFullScreen) {
if (this.isFullScreen) {
// 關閉全屏
this.exitFullScreen()
this.isFullScreen = false
} else {
// 打開全屏
this.requestFullScreen(document.body)
this.isFullScreen = true
}
} else {
this.$message.warning({
content: '當前瀏覽器暫不支持全屏模式，請切換瀏覽器后重新嘗試！',
duration: 3
})
}
},
requestFullScreen (element) {
// 判斷各種瀏覽器，找到正確的方法
const requestMethod = element.requestFullScreen || // W3C
element.webkitRequestFullScreen || // Chrome, safari
element.mozRequestFullScreen || // FireFox
element.msRequestFullscreen // IE11
if (requestMethod) {
requestMethod.call(element)
}
},
exitFullScreen () {
var exitMethod = document.exitFullscreen || // W3C
document.mozCancelFullScreen || // FireFox
document.webkitExitFullscreen || // Chrome等
document.msExitFullscreen // IE11
if (exitMethod) {
exitMethod.call(document)
}
},
addFullScreenListener () {
const self = this
document.onkeydown = function (e) {
if (e && e.keyCode === 122) { // 捕捉F11鍵盤動作
e.preventDefault() // 阻止F11默認動作
self.toggleFullScreen()
}
}
// 監(jiān)聽不同瀏覽器的全屏事件，并件執(zhí)行相應的代碼
switch (self.browserKernel) {
case 'webkit':
document.onwebkitfullscreenchange = function () {
if (document.webkitIsFullScreen) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
case 'gecko':
document.onmozfullscreenchange = function () {
if (document.mozFullScreen) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
case 'trident':
document.onmsfullscreenchange = function () {
if (document.msFullscreenElement) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
case 'others':
document.onfullscreenchange = function () {
if (document.fullscreen) {
self.isFullScreen = true
} else {
self.isFullScreen = false
}
}
break
default:
break
}
},優(yōu)化方案
在頁面初始化時判斷瀏覽器是否支持全屏操作
// 檢查瀏覽器是否支持全屏
this.canFullScreen = document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
if (document.webkitFullscreenEnabled) {
this.browserKernel = 'webkit'
} else if (document.mozFullScreenEnabled) {
this.browserKernel = 'gecko'
} else if (document.msFullscreenEnabled) {
this.browserKernel = 'trident'
} else if (document.fullscreenEnabled) {
this.browserKernel = 'others'
}
if (this.canFullScreen) {
this.addFullScreenListener()
}最后在銷毀頁面時移除監(jiān)聽：
destroyed(){
document.onkeydown = null
switch (this.browserKernel) {
case 'webkit':
document.onwebkitfullscreenchange = null
break
case 'gecko':
document.onmozfullscreenchange = null
break
case 'trident':
document.onmsfullscreenchange = null
break
case 'others':
document.onfullscreenchange = null
break
default:
break
}
}如果想換圖標可以自動定義 ：
也可以用svg 圖標引進來：
<i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'" ><i/>
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在做項目的時候發(fā)現(xiàn)一個情況,輸入框無法輸入值并且表單校驗失靈,所以下面這篇文章主要給大家介紹了關于el-input無法輸入的問題和表單驗證失敗問題解決的相關資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue開發(fā)中調用微信jssdk的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Django+Vue跨域環(huán)境配置詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本篇文章主要介紹了Vue學習筆記進階篇之多元素及多組件過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
懶加載也稱為延遲加載,是一種將資源(如圖片、組件、代碼等)推遲到需要的時候再加載的策略,這篇文章主要介紹了Vue路由懶加載與組件懶加載的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-03-03
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
elementUI中el-upload文件上傳的實現(xiàn)方法
ElementUI的組件支持多種事件鉤子,如http-request、before-upload和on-change,以實現(xiàn)自定義文件上傳處理,這篇文章主要介紹了elementUI中el-upload文件上傳的實現(xiàn)方法,需要的朋友可以參考下2024-11-11
這篇文章主要給大家介紹了關于vue單文件中引用路徑處理的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue.js具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
文章主要內容是關于如何在項目中引入依賴項以及編寫組件代碼的步驟和總結,作者分享了個人經驗,旨在為讀者提供參考,并鼓勵大家支持腳本之家2024-12-12