vue项目某个元素全屏，兼容浏览器

最新推荐文章于 2024-05-08 09:26:46 发布

宝儿哥&

最新推荐文章于 2024-05-08 09:26:46 发布

阅读量292

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/dongzi666/article/details/128092572

版权

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