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)
}
}