說明：

實測可以在谷歌戳玫、火狐、360 瀏覽器使用
解決了在瀏覽器全屏下監(jiān)聽不到鍵盤Esc事件
解決了取消全屏和全屏的同步問題寿弱，ESC按鍵下可以同步

代碼如下：

• html片段

<!-- 全屏顯示 -->
<div class="btn-fullscreen" @click="handleFullScreen">
  <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
    <i class="el-icon-rank"></i>
  </el-tooltip>
</div>

• vue片段

data()  {
  return {
    fullscreen: false, 
  }
},
mounted() {
    const _this = this;
    window.addEventListener('resize', () => {
      if(!_this.checkFull()) {
        // 退出全屏后要執(zhí)行的動作
        _this.fullscreen = false;
      }
    })
},
methods: {
   checkFull() {
      //判斷瀏覽器是否處于全屏狀態(tài) （需要考慮兼容問題）
      //火狐瀏覽器
      //谷歌瀏覽器及Webkit內(nèi)核瀏覽器
      var isFull = document.mozFullScreen || document.fullScreen || document.webkitIsFullScreen ||
                   document.webkitRequestFullScreen || document.mozRequestFullScreen || document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
   },
   // 控制瀏覽器是否全屏
   changeScreen() {
      let element = document.documentElement;
      if(this.fullscreen) {
        if(document.exitFullscreen) { //W3C
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { //FireFox
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) { //Chrome等
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) { //IE11
          document.msExitFullscreen();
        }
      } else {
        if(element.requestFullscreen) { //W3C
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) { //Chrome等
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) { //FireFox
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) { //IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
}

vue的mounted中window.onresize不生效

原因: 在vue開發(fā)中投剥，因為引用的父組件和子組件都使用了window.onresize以至于一個window.onresize失效表锻。
解決方案: 可以采用下面的方式

let that = this
window.onresize = function() { if(!that.checkFull())that.fullscreen = false; }
// 改為以下寫法
window.addEventListener('resize', () => { 
  if(!that.checkFull())that.fullscreen = false; 
});