浏览器全屏 js

没有我的日子里你安然无恙 没有你的世界里我备受煎熬

作为记录, 忘了可以找到

<template>
  <div class="p20">
    <div class="w100 h100" style="background: pink" @click="handleFullScreen"></div>
  </div>
</template>

<script>
export default {
  name: '', // Pascal命名
  data() {
    return {
      fullscreen: false,
    };
  },
  methods: {
    handleFullScreen() {
      let element = document.documentElement;
      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();
        }
      }
      // 因为点击esc也会触发关闭全屏, 这里采用取反操作
      this.fullscreen = !this.fullscreen;
    },
  },
};
</script>