vue实现点击放大至全屏，让你的网站更加专业

前言

当我们在浏览网页时，有时会遇到一个容器，它的内容非常精彩，我们想要将它放大至全屏查看，但是却不知道如何实现。今天，我来为大家分享一下如何利用 vue 实现这个功能，让你的网页浏览体验更加丰富多彩。

---

实现效果

---

实现思路

实现这个小功能非常的简单，我们只需要调用 window 自带的一个方法 exitFullscreen ，然后获取需要全屏放大容器的 id 即可实现。

核心代码

<template>
  <div>
    <div class="mapBox">
      <!-- // 要放大的容器 -->
      <div id="mapCodeID"><img src="https://img2.baidu.com/it/u=3117014787,2706459536&fm=253&fmt=auto&app=138&f=JPEG?w=231&h=500" alt="">
      </div>
      <!-- // 小图标 -->
      <div class="iconBox" @click="enlarge"><img src="https://s4.ax1x.com/2022/01/27/7jEmTO.png" title="点击放大"></div>
    </div>
  </div>
</template>
<script>
export default {
  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>

<style scoped>
.mapBox {
  position: relative;
}
#mapCodeID {
  width: 100%;
  height: 500px;
}
#mapCodeID img {
  width: 100%;
  height: 100%;
}
.iconBox {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>