vue如何让一个div占满全屏_vue实现点击全屏效果，可具体让某个容器全屏

使用的是window自带的exitFullscreen方法

template:

全屏

data:

fullscreen:false,

methods:

screen(){

// let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果

let element = document.getElementById('con_lf_top_div');//设置后就是 id==con_lf_top_div 的容器全屏

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();

}

this.fullscreen = false

} 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;

}