CSS для переключения bootstrap - vue карты на полный экран - PullRequest
Новая
       263

CSS для переключения bootstrap - vue карты на полный экран

0 голосов
/ 07 августа 2020

У меня есть две диаграммы (Apex) внутри двух карт bootstrap - vue, я хочу разместить кнопку на каждой карте, при нажатии на которую моя отдельная карта будет отображаться в полноэкранном режиме. Все настроено, но мой CSS для полноэкранного режима не работает.

При раскомментировании приведенного ниже CSS в моей песочнице (ссылка приведена ниже) мои карты перекрываются. 

  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;
}

Ссылка на песочницу здесь: нажмите здесь

1 Ответ

1 голос
/ 07 августа 2020

Вы можете использовать встроенные функции браузера, чтобы открыть элемент 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();
    }
  }
}
...