vue全屏事件開發(fā)詳解
本文實(shí)例為大家分享了vue全屏事件開發(fā)的具體代碼,供大家參考,具體內(nèi)容如下
在項(xiàng)目中有需求相應(yīng)瀏覽器全屏,寫了個(gè)案例代碼
先看看效果吧
全屏顯示:
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確定是否相應(yīng)全屏
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue使用screenfull實(shí)現(xiàn)全屏效果
- 使用Vue-cli 中為單獨(dú)頁面設(shè)置背景圖片鋪滿全屏
- vue-cli點(diǎn)擊實(shí)現(xiàn)全屏功能
- vue實(shí)現(xiàn)全屏滾動效果(非fullpage.js)
- vue-video-player 解決微信自動全屏播放問題(橫豎屏導(dǎo)致樣式錯(cuò)亂問題)
- vue實(shí)現(xiàn)瀏覽器全屏展示功能
- 富文本編輯器vue2-editor實(shí)現(xiàn)全屏功能
- vue-video-player 通過自定義按鈕組件實(shí)現(xiàn)全屏切換效果【推薦】
- vue使用screenfull插件實(shí)現(xiàn)全屏功能
相關(guān)文章
Vuex中實(shí)現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改
今天小編就為大家分享一篇Vuex中實(shí)現(xiàn)數(shù)據(jù)狀態(tài)查詢與更改,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11vue中實(shí)現(xiàn)移動端的scroll滾動方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)移動端的scroll滾動方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue組件實(shí)現(xiàn)卡片動畫倒計(jì)時(shí)示例詳解
這篇文章主要介紹了Vue組件實(shí)現(xiàn)卡片動畫倒計(jì)時(shí)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07詳解如何實(shí)現(xiàn)一個(gè)簡單的 vuex
本篇文章主要介紹了如何實(shí)現(xiàn)一個(gè)簡單的 vuex,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02多個(gè)Vue項(xiàng)目部署到服務(wù)器的步驟記錄
這篇文章主要給大家介紹了關(guān)于多個(gè)Vue項(xiàng)目部署到服務(wù)器的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10antd?Vue實(shí)現(xiàn)Login登錄頁面布局案例詳解?附帶驗(yàn)證碼驗(yàn)證功能
這篇文章主要介紹了antd?Vue實(shí)現(xiàn)Login登錄頁面布局案例詳解附帶驗(yàn)證碼驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05vue3實(shí)現(xiàn)頁面跳轉(zhuǎn)的示例代碼
這篇文章給大家介紹了vue3如何實(shí)現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02Vue.js實(shí)現(xiàn)開發(fā)購物車功能的方法詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)開發(fā)購物車功能的方法,結(jié)合實(shí)例形式分析了基于vue.js開發(fā)的購物車功能相關(guān)操作步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02