requestFullscreen()方法实现全屏显示
2022-08-03 本文已影响0人
zhao_ran
<template>
<div class="app-container" ref="apps">
<el-button @click="handleFullscreen">test</el-button>
</div>
</template>
isFullScreen() {
return !!(
document.fullscreen ||
document.mozRequestFullScreen ||
document.webkitRequestFullscreen ||
document.msRequestFullscreen ||
document.fullscreenElement
);
},
handleFullscreen() {
this.fullscreen = !this.isFullScreen();
if (this.fullscreen) {
this.launchIntoFullscreen();
} else {
this.exitFullscreen();
}
},
launchIntoFullscreen() {
// 全屏
const element = this.$refs["apps"];
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
},
exitFullscreen() {
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
},