vue实现点击全屏效果,可具体让某个容器全屏
前言:之前在使用gis在页面渲染地图时就用到过点击让gis容器全屏展示,后来有遇到了,在这里记录一下,使用的是window自带的exitFullscreen方法template:<span @click="screen">全屏</span>js部分:data:fullscreen:false,methods:sc...
·
前言:
之前在使用gis在页面渲染地图时就用到过点击让gis容器全屏展示,后来有遇到了,在这里记录一下,使用的是window自带的exitFullscreen方法
template:
<span @click="screen">全屏</span>
js部分:
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();
}
} 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;
}
更多推荐
已为社区贡献102条内容
所有评论(0)