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

最新推荐文章于 2024-07-19 15:49:07 发布

原创

最新推荐文章于 2024-07-19 15:49:07 发布 · 4.2k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #全屏功能 #F11全屏

该博客介绍了如何解决全屏功能中遇到的问题，包括点击按钮进入全屏后按ESC退出失效以及F11全屏后无法用ESC退出全屏的bug。提供了单个元素全屏和整个网页全屏的代码示例，详细解释了监听ESC和F11按键的实现方法，确保全屏操作的正常进行。

在这里插入图片描述

全屏功能

已经解决了因为点击按钮进入全屏后用户按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