1、结构
<el-button id="full-btn-medium" @click.prevent="screenFull" title="全屏显示"><i class="el-icon-rank"></i></el-button>
<div id="box"></div>
2、 data
fullscreenStatus:false,
3、 methods
screenFull(){
let element = document.getElementById('box');//设置后就是 让id==box的容器全屏
if (this.fullscreenStatus) {
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.fullscreenStatus = !this.fullscreenStatus;
},