<el-button size="mini" type="success" @click="intScreen">全屏显示</el-button>
<el-button size="mini" type="success" @click="outScreen">退出全屏</el-button>
// 全屏
intScreen() {
var docElm = document.documentElement;
if (docElm.requestFullscreen) { //W3C
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) { //FireFox
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) { //Chrome等
docElm.webkitRequestFullScreen();
} else if (elem.msRequestFullscreen) { //IE11
elem.msRequestFullscreen();
}
},
// 退出全屏
outScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
或者监听屏幕变化的大小进行相应的操作例如:我这里兼容了两种分辨率下的屏幕.按f11就影藏侧边栏和标题等等
window.addEventListener('resize', ()=> {
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
if((height >= 1079 && width == 1920) || (height >= 1049 && width == 1680)){
this.main = true;
this.aside = false;
}else{
this.main = false;
this.aside = true;
}
})
没了，结束了，是不是很简单呐，如有错误，欢迎留言.如有问题，不吝赐教。如果此篇博文对您有帮助，还请动动小手点赞 收藏 ⭐留言 呐~，谢谢 ~ ~
,
