溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue實(shí)現(xiàn)全屏事件的源代碼

發(fā)布時(shí)間：2020-06-23 10:07:18 來源：億速云 閱讀：182 作者：清晨 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)vue實(shí)現(xiàn)全屏事件的源代碼，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在項(xiàng)目中有需求相應(yīng)瀏覽器全屏，寫了個(gè)案例代碼

先看看效果吧

vue實(shí)現(xiàn)全屏事件的源代碼

全屏顯示：

vue實(shí)現(xiàn)全屏事件的源代碼

html代碼：

<!-- el-tooltip 文字提示 -->
<div class="btn-fullscreen" @click="handleFullScreen">
 <el-tooltip effect="dark" :content="fullscreen &#63; `取消全屏`:`全屏`" 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)全屏

關(guān)于vue實(shí)現(xiàn)全屏事件的源代碼就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手