浏览器全屏效果

1.全屏监听事件
const 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;
    });

2.全屏点击事件
fullScreenEvent() {
      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();
        }
      }
    }