全屏

<div class="header-fullscreen"
     @click="fullscreen"
>
  <el-icon>
    <FullScreen/>
  </el-icon>
</div>

处理方法:

function fullscreen() {
  // jobList.value.forEach(item => {
    let element;
      element = document.getElementById('chart-group');
      element.getElementsByTagName("div").forEach(item => {
        item.style.background = "white";
      })
    if (element.requestFullScreen) {
      // HTML W3C 提议
      element.requestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // Webkit (works in Safari5.1 and Chrome 15)
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      // Firefox (works in nightly)
      element.mozRequestFullScreen();
    }
  // })
}

样式:

  .header-fullscreen {
    margin: 12px 20px;
    cursor: pointer;
    position: absolute;
    z-index: 2;
    right: 15px;
    top: 15px;
    color: white;
  }

 

posted @ 2024-09-03 18:54  没心没肺没人性  阅读(42)  评论(0)    收藏  举报