CSS切换引导vue卡全屏

Question

我在两张引导vue卡中有两张图表(Apex(，我想在每张卡上放一个按钮，点击后会使我的每张卡全屏显示。一切都设置好了，但我的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;
}

沙盒链接在这里：点击这里

Answer 1

您可以使用浏览器内置的功能以全屏方式打开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();
}
}
}