功能描述: 实现点击一个按钮,全屏展示,再点击退出全屏;
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; },