vue 全屏展示页面某个模块 并判断是否按了esc键

template部分:
<div class="commonInline">
                            <el-button size="small"  @click="handleFullScreen" v-if="!fullscreen">全屏</el-button>
                            <el-button size="small"  @click="handleFullScreen" v-else>退出全屏</el-button>
                          </div>
<div id="con_lf_top_div">这是要全屏展示的模块</div>
data部分:

fullscreen: false
methods部分:

checkFull() {
      //判断浏览器是否处于全屏状态 (需要考虑兼容问题)
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },

    // 全屏事件
    handleFullScreen() {
// let element = document.documentElement;
      let element = document.getElementById("con_lf_top_div"); //设置后就是   id==con_lf_top_div 的容器全屏
      
      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;
      this.fullscreen ? element.style.padding = '10px' : element.style.padding = '0px'
    },
created部分:
let that = this;    
    window.onresize = function () {
      if (!that.checkFull()) {
        // 退出全屏后要执行的动作
        // console.log("退出全屏");
        that.fullscreen = false;
        let fullElement = document.getElementById("con_lf_top_div");
        fullElement.style.padding = '0px';
        

      }
    };
原文地址:https://www.cnblogs.com/wysdddh/p/14340643.html