vue中的全屏事件，按esc退出全屏

1、vue页面中根据是否全屏判断当前显示icon图标，isFull为true时表示全屏，默认值为false，并绑定click事件

    <div class="screen-icon-box">
            <i :class="isFull?'el-icon-crop':'el-icon-full-screen'" @click="fullScreenEvent"></i>
    </div>

2、click全屏事件

    fullScreenEvent: function() {
      let el = document.documentElement;
      if (this.isFull) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (el.requestFullscreen) {
          el.requestFullscreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.webkitRequestFullScreen) {
          el.webkitRequestFullScreen();
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen();
        }
      }
    },

3、 页面初始化渲染完成后，绑定fullscreenchange的全屏改变监听事件，这样按esc退出全屏时也会触发

  mounted() {
    let isFullscreen =
      document.fullscreenElement ||
      document.mozFullScreenElement ||
      document.webkitFullscreenElement ||
      document.fullScreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen;
    isFullscreen = !!isFullscreen;
    let that = this;
    document.addEventListener("fullscreenchange", () => {
      that.isFull = !that.isFull;
    });
    document.addEventListener("mozfullscreenchange", () => {
      that.isFull = !that.isFull;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      that.isFull = !that.isFull;
    });
    document.addEventListener("msfullscreenchange", () => {
      that.isFull = !that.isFull;
    });
  },