vue浏览器全屏 非全屏切换 按esc退出全屏
methods: {
// 全屏 点击按钮
allping(){
this.status = true;
this.enterFullscreen();
},
// 缩小 点击按钮
narrow(){
this.status = false;
this.exitFullscreen();
},
// 进入全屏方法 enterFullscreen() { var docElm = document.documentElement; //W3C if(docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } //IE11 else if(docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } }, // 退出全屏方法 exitFullscreen() { //W3C if (document.exitFullscreen) { document.exitFullscreen(); } //FireFox else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } //Chrome等 else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } //IE11 else if (document.msExitFullscreen) { document.msExitFullscreen(); } }, // 判断当前页面是否全屏 getFullScreenStatus() { this.status = !!( document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.webkitFullScreen || document.msFullScreen ); }, },
mounted() {
// 监听浏览器全屏事件
let that = this;
document.addEventListener("fullscreenchange", function() {
that.getFullScreenStatus();
});
document.addEventListener("mozfullscreenchange", function() {
that.getFullScreenStatus();
});
document.addEventListener("webkitfullscreenchange", function() {
that.getFullScreenStatus();
});
document.addEventListener("msfullscreenchange", function() {
that.getFullScreenStatus();
});
},