CSS 切换 bootstrap-vue 卡片全屏

Question

我在两张 bootstrap-vue 卡片中有两个图表 (Apex)，我想在每张卡片上放置一个按钮，单击该按钮会使我的个人卡片全屏显示。一切都已设置好，但我的 CSS 无法全屏显示。

在我的沙盒中取消注释下面的 CSS 时（link 在下面给出），它使我的卡片重叠。

  div.card-body.sessionInfo {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

沙盒 link 在这里：click here

Answer 1

您可以使用浏览器 built-in 功能全屏打开 HTML 元素。

分叉沙盒： https://hr9i9.csb.app/

<b-container fluid>
  <b-row>
    <b-col>
      <b-card class="mt-2">
        <b-card ref="graph-1" body-class="sessionInfo">
          <b-card-title>Session Graph</b-card-title>
          <div>
            <b-button @click="toggleFullscreen('graph-1')" size="sm">
              <b-icon-arrows-angle-expand></b-icon-arrows-angle-expand>
            </b-button>
          </div>
        </b-card>
        <!-- second card -->
        <b-card ref="graph-2" body-class="errorInfo" class="mt-1">
          <b-card-title>Error Graph</b-card-title>
          <div>
            <b-button @click="toggleFullscreen('graph-2')" size="sm">
              <b-icon-arrows-angle-expand></b-icon-arrows-angle-expand>
            </b-button>
          </div>
        </b-card>
      </b-card>
    </b-col>
  </b-row>
</b-container>

methods: {
  toggleFullscreen(ref) {
    const elem = this.$refs[ref];
    // Note: this fullscreen check does not work on IE11
    const isFullscreen = document.fullscreenElement !== null;

    if (isFullscreen) {
      this.closeFullscreen()
    } else {
      this.openFullscreen(elem)
    }
  },
  openFullscreen(elem) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
    }
  },
  closeFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    }
  }
}

CSS 切换 bootstrap-vue 卡片全屏

CSS to toggle the bootstrap-vue card full screen

css

bootstrap-vue