vue element-ui導(dǎo)航實現(xiàn)全屏/取消全屏功能
更新時間：2024年08月28日 08:44:43 作者：IT博客技術(shù)分享
這篇文章主要介紹了vue element-ui導(dǎo)航實現(xiàn)全屏/取消全屏功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
element-ui導(dǎo)航實現(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, //全屏開關(guān)
}js方法：
//全屏設(shè)置
toggleFullScreen () {
if (this.canFullScreen) {
if (this.isFullScreen) {
// 關(guān)閉全屏
this.exitFullScreen()
this.isFullScreen = false
} else {
// 打開全屏
this.requestFullScreen(document.body)
this.isFullScreen = true
}
} else {
this.$message.warning({
content: '當(dāng)前瀏覽器暫不支持全屏模式，請切換瀏覽器后重新嘗試！',
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默認(rèn)動作
self.toggleFullScreen()
}
}
// 監(jiān)聽不同瀏覽器的全屏事件，并件執(zhí)行相應(yīng)的代碼
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
}
}如果想換圖標(biāo)可以自動定義 ：
也可以用svg 圖標(biāo)引進(jìn)來：
<i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'" ><i/>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在做項目的時候發(fā)現(xiàn)一個情況,輸入框無法輸入值并且表單校驗失靈,所以下面這篇文章主要給大家介紹了關(guān)于el-input無法輸入的問題和表單驗證失敗問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
詳解vue開發(fā)中調(diào)用微信jssdk的問題
這篇文章主要介紹了vue開發(fā)中調(diào)用微信jssdk的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Django+Vue跨域環(huán)境配置詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue學(xué)習(xí)筆記進(jìn)階篇之多元素及多組件過渡
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之多元素及多組件過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12
懶加載也稱為延遲加載,是一種將資源(如圖片、組件、代碼等)推遲到需要的時候再加載的策略,這篇文章主要介紹了Vue路由懶加載與組件懶加載的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下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
這篇文章主要給大家介紹了關(guān)于vue單文件中引用路徑處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
文章主要內(nèi)容是關(guān)于如何在項目中引入依賴項以及編寫組件代碼的步驟和總結(jié),作者分享了個人經(jīng)驗,旨在為讀者提供參考,并鼓勵大家支持腳本之家2024-12-12