【解决全屏ESC和F11问题】vue实现全屏和退出全屏功能，实现让某一个元素全屏功能

全屏功能

已经解决了因为点击按钮进入全屏后用户按ESC退出了全屏导致再点击按钮不生效问题，解决了因为按F11全屏后按ESC键不生效无法退出全屏，同时退出全屏的按钮点击也不生效的问题。

单个元素全屏代码

<template>
  <div>
    <p>这个是点击后单个绑定的元素会全屏</p>
    <el-button type="primary" @click="fullscreenchange"
      >单元素全屏</el-button
    >
    <div ref="aaaa" class="ceshi">这是单个元素</div>

  </div>
</template>

<script>
export default {
  methods: {
    //单个div全屏方法
    fullscreenchange() {
      const isFullScreen =
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenElement;
      if (isFullScreen) {
        console.log("退出全屏");
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      } else {
        var fullscreen = this.$refs.aaaa; // 这个地方绑定需要全屏的元素
        console.log("进入全屏");
        if (fullscreen.requestFullscreen) {
          fullscreen.requestFullscreen();
        } else if (fullscreen.mozRequestFullScreen) {
          fullscreen.mozRequestFullScreen();
        } else if (fullscreen.webkitRequestFullscreen) {
          fullscreen.webkitRequestFullscreen();
        } else if (fullscreen.msRequestFullscreen) {
          fullscreen.msRequestFullscreen();
        }
      }
    },
</script>

<style>
.ceshi {
  color: aliceblue;
  font-size: 20px;
  background-color: red;
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}
</style>

网页全屏方法

直接复制就行！！

ESC和F11的问题已经解决了，自己复制测试一下就行。

<template>
  <div>
    <p>这里是点击后整个网页全屏的，并且解决了ESC和F11的监听问题。</p>
    <el-button type="primary" @click="enter_full_screen" v-if="!full"
      >进入全屏</el-button
    >
    <el-button type="primary" @click="exitFullscreen" v-else
      >退出全屏</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      //true是进入全屏，false是退出全屏
      full: false,
    };
  },
  created() {
    //指向问题先保存
    let that = this;
    //这里是监听ESC的
    window.onresize = function () {
      if (!that.checkFull()) {
        // 退出全屏后要执行的动作
        console.log("退出全屏");
        that.full = false;
      }
    };
  },
  mounted() {
    //这里是监听F11案件的
    window.addEventListener("keydown", this.KeyDown, true); // 监听按键事件
  },
  methods: {
    //进入全屏模式
    enter_full_screen() {
      this.full = true;
      document.documentElement.webkitRequestFullScreen();
    },
    //退出全屏模式
    exitFullscreen() {
      this.full = false;
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    //监听解决F11打开后无法esc退出同时退出全屏的按钮也失效问题。
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false;
        this.enter_full_screen(); //这里方的是触发全屏的方法
      }
    },
    //监听ESC事件，解决点击按钮全屏后按ESC退出再点击按钮不生效问题。
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
  },
};
</script>

<style>
</style>