vue全屏事件開發(fā)詳解
更新時間：2020年06月17日 11:32:24 作者：影夜隨風
這篇文章主要為大家詳細介紹了vue全屏事件的開發(fā)過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue全屏事件開發(fā)的具體代碼，供大家參考，具體內容如下
在項目中有需求相應瀏覽器全屏，寫了個案例代碼
先看看效果吧
全屏顯示：
html代碼：
<!-- el-tooltip 文字提示 --> <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom"> <i class="el-icon-rank"></i> </el-tooltip> </div>
js代碼
data(){
return {
fullscreen: false
}
}
// 全屏事件
handleFullScreen(){
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
通過fullscreen判斷的true和false確定是否相應全屏
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vuex中實現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改
今天小編就為大家分享一篇Vuex中實現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
下面小編就為大家分享一篇vue中實現(xiàn)移動端的scroll滾動方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue組件實現(xiàn)卡片動畫倒計時示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本篇文章主要介紹了如何實現(xiàn)一個簡單的 vuex，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)文章評論和回復列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關于vue3中ref獲取子組件值的相關資料,在Vue3中父組件獲取子組件的值可以通過使用'ref'和'$refs'來實現(xiàn),文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關于多個Vue項目部署到服務器的相關資料，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
antd?Vue實現(xiàn)Login登錄頁面布局案例詳解?附帶驗證碼驗證功能
這篇文章主要介紹了antd?Vue實現(xiàn)Login登錄頁面布局案例詳解附帶驗證碼驗證功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
這篇文章給大家介紹了vue3如何實現(xiàn)頁面跳轉,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
Vue.js實現(xiàn)開發(fā)購物車功能的方法詳解
這篇文章主要介紹了Vue.js實現(xiàn)開發(fā)購物車功能的方法,結合實例形式分析了基于vue.js開發(fā)的購物車功能相關操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-02-02