做web页面的时候,有这样一个需求,页面中有个地图模块,产品需求是想有个全屏模式查看,
代码如下:
<div class="top-pannel">
<div class="map-title">用户消费热力图</div>
<div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.6)"
id="amap-vue">
</div>
<div class="iconBox" @click="enlarge">
<img src="https://s4.ax1x.com/2022/01/27/7jEmTO.png" title="点击全屏">
</div>
</div>
methods:{
enlarge() {
let element = document.getElementById("amap-vue")
// 浏览器兼容
if (document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msExitFullscreenElement) {
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) {
element.msRequestFullscreen();
}
}
}
}