<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;
}
})
沒了，結束了，是不是很簡單呐，如有錯誤，歡迎留言.如有問題，不吝賜教。如果此篇博文對您有幫助，還請動動小手點贊 收藏 ⭐留言 呐~，謝謝 ~ ~
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
