javaScript----js全屏及退出全屏

需求描述：需要放大至全屏展示页面某块区域，并能退出全屏；

解决方案：案例使用vue实现，具体实现步骤如下

（1）数据定义【fullscreen】

（2）全屏方法定义

（3）方法绑定至元素点击事件

代码：

// 全屏事件
    handleFullScreen(i) {
      let element = document.getElementsByClassName("graph")[i];
      let bottomEle = document.getElementsByClassName("bottom")[i];
      let tabs = bottomEle.getElementsByClassName("tabs")[0];
      let elTabsContent = tabs.getElementsByClassName("el-tabs__content")[0];
      let graphCanvas = elTabsContent.getElementsByClassName("graph-canvas")[0];
      if (this.fullscreen) {
        tabs.style.height = "510px";
        elTabsContent.style.height = "508px";
        graphCanvas.style.height = "470px";
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        tabs.style.height = "100vh";
        elTabsContent.style.height = "100vh";
        graphCanvas.style.height = "92vh";
        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;
    },