本文例項為大家分享了vue全屏事件開發的具體程式碼，供大家參考，具體內容如下

在專案中有需求相應瀏覽器全屏，寫了個案例程式碼

先看看效果吧

全屏顯示：

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確定是否相應全屏

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。