区域点击全屏放大

https://blog.csdn.net/weixin_44856917/article/details/128818158

 

<template>
  <div>
    <!-- // 小图标 -->
      <a-button @click="enlarge">双击放大</a-button>
    <div id="mapCodeID" class="mermaid" ref="mermaid" style="margin-top:0px"></div>
  </div>
</template>
<script>



export default {

  created() {

  },
  data() {
    return {
      FullScreen: false, // 是否全屏
    };
  },
  
  mounted() {
    
  },

  methods: {
        //点击全屏事件
    enlarge() {
      // let element = document.documentElement;//全屏放大
      let element = document.getElementById("mapCodeID"); //需要全屏容器的id
      // 浏览器兼容
      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) {
          element.msRequestFullscreen();
        }
      }
      this.FullScreen = !this.FullScreen;
    },

  },
};
</script>

 

 

例子: