功能描述:
实现点击一个按钮,全屏展示,再点击退出全屏;
html
<div class="userImg userImg1">
<span
v-if="!isFullScreen"
class="fullScreenBtn"
@click="handleFullScreen"
>
<svg-icon icon-class="full-screen-line"></svg-icon>
全屏
</span>
<span
v-if="isFullScreen"
class="fullScreenBtn"
@click="handleFullScreen"
>
<svg-icon icon-class="full-screen-exit-line"></svg-icon>
退出全屏
</span>
</div>
js部分
handleFullScreen() {
let element = document.documentElement;
if (this.isFullScreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
this.isFullScreen = !this.isFullScreen;
},