vue的SPA项目，点击按钮实现全屏 代码如下： html:
<div class="fullScreen" @click="fullScreen"> <span style="font-size: 16px; margin-left: 10px; font-weight: bold">全屏</span> </div>js:
data(){ return{ btnStatue: false } }, method:{ // 一键全屏 handleFullScreen() { let element = document.documentElement; if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } // this.index++; }, // 一键退出 exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } // this.index--; }, // 全屏按钮点击事件 fullScreen() { if (this.btnStatue == false) { this.btnStatue = true; this.handleFullScreen(); } else { this.btnStatue = false; this.exitFullscreen(); } // this.$router.go(0) } }