vue全屏事件開(kāi)發(fā)詳解

更新時(shí)間：2020年06月17日 11:32:24 作者：影夜隨風(fēng)

這篇文章主要為大家詳細(xì)介紹了vue全屏事件的開(kāi)發(fā)過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue全屏事件開(kāi)發(fā)的具體代碼，供大家參考，具體內(nèi)容如下

在項(xiàng)目中有需求相應(yīng)瀏覽器全屏，寫(xiě)了個(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;
},

通過(guò)fullscreen判斷的true和false確定是否相應(yīng)全屏

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果
今天小編就為大家分享一篇vue-router之實(shí)現(xiàn)導(dǎo)航切換過(guò)渡動(dòng)畫(huà)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
elementui中樹(shù)形表格切換展開(kāi)不同層級(jí)的示例代碼
這篇文章主要介紹了elementui中樹(shù)形表格切換展開(kāi)不同層級(jí),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
Vue 2.0 中依賴注入 provide/inject組合實(shí)戰(zhàn)
這篇文章主要介紹了Vue 2.0 依賴注入 provide/inject組合，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-06-06
Vue中的baseurl如何配置
這篇文章主要介紹了Vue中的baseurl如何配置問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue3 自定義loading的操作方法
這篇文章主要介紹了vue3 自定義loading的操作方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
Vue滾動(dòng)頁(yè)面到指定位置的實(shí)現(xiàn)及避坑
這篇文章主要介紹了Vue滾動(dòng)頁(yè)面到指定位置的實(shí)現(xiàn)及避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
原生JS?Intersection?Observer?API實(shí)現(xiàn)懶加載
這篇文章主要為大家介紹了原生JS?Intersection?Observer?API實(shí)現(xiàn)懶加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
element el-input directive數(shù)字進(jìn)行控制
本文介紹了vue使用directive 進(jìn)行控制的方法，使用element開(kāi)發(fā)的過(guò)程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點(diǎn)，有需要小數(shù)點(diǎn)的，就有一定的參考價(jià)值，有興趣的可以了解一下
2018-10-10
vue中的inject用法及說(shuō)明
這篇文章主要介紹了vue中的inject用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue自定v-model實(shí)現(xiàn)表單數(shù)據(jù)雙向綁定問(wèn)題
vue.js的一大功能便是實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實(shí)現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09