vue实现点击全屏效果，可具体让某个容器全屏

最新推荐文章于 2025-04-26 15:08:39 发布

浩星

最新推荐文章于 2025-04-26 15:08:39 发布

阅读量9k

点赞数 9

分类专栏： vue-插件文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41619796/article/details/104751814

版权

vue-插件专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种在GIS应用中实现地图容器全屏展示的方法，通过使用window的exitFullscreen及requestFullscreen等API，实现了地图界面的全屏切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

之前在使用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;

      }