全屏方式一、

      var element = document.querySelector(".class-name");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.oRequestFullscreen) {
        element.oRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      } else {
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementById("monitors");
        var cssText = "width:100%;height:100%;overflow:hidden;";
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText + ";" + "margin:0px;padding:0px;";
        document.IsFullScreen = true;
      }

全屏方式二、

      var de = document.querySelector("#app");
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }

退出全屏监听

  created() {
    const that = this
    window.onresize = function () {
      if (!that.checkFull()) {
        // 退出全屏后要执行的动作
        console.log("退出全屏")
        that.fullscreen = false;
        that.changeScreenStatus(false);
      } else {
        console.log("全屏")
        that.changeScreenStatus(true);
      }
    }
  },
  methods: {
    checkFull() {
      // 判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      var isFull = document.mozFullScreen || document.fullScreen || document.webkitIsFullScreen || document.webkitRequestFullScreen || document.mozRequestFullScreen || document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull;
    },
}