样式
<div class="fullScreen">
<el-tooltip
class="item"
effect="dark"
:content="isFullScreen ? '退出全屏' : '进入全屏'"
placement="top"
>
<i
class="el-icon-full-screen"
@click="fullScreen"
v-if="!isFullScreen"
></i>
<i class="el-icon-crop" @click="exitFullscreen" v-else></i>
</el-tooltip>
</div >
实现
fullScreen() {
let element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
this.isFullScreen = true;
},
exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
this.isFullScreen = false;
},