VUE 全屏页面
1、点击全屏按钮进入全屏模式
<img src="../../../assets/image/fullscreen_icon.png" class="full_icon" @click="rtPush">
rtPush(){
console.log("this.$route", this.$route);
this.$router.push({path:this.$route.path})
let element = document.documentElement;
if (this.fullscreen) {
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) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
}
2、初次加载进入全屏模式
created() {
//初次加载进入全屏模式.
setTimeout(()=>{
if(this.$route.name=='datacenter'){
this.launchIntoFullscreen(document.documentElement);
}
},0)
//全屏事件监听
document.addEventListener("fullscreenchange", this.fullscreenchangeFunc, false);
}
methods:{
launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
},
exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
},
fullscreenchangeFunc(){
let isFull = document.fullscreenElement ||document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
if(!isFull){
this.$router.push({path:'/home'})
}
},
}
beforeDestroy() {
//移除事件监听
document.removeEventListener("fullscreenchange", this.fullscreenchangeFunc);
},