vue 全屏/退出全屏，esc监控退出全屏

最新推荐文章于 2024-07-23 16:01:04 发布

空山新雨君

最新推荐文章于 2024-07-23 16:01:04 发布

阅读量2.2k

点赞数 2

分类专栏：前端 Vue

本文链接：https://blog.csdn.net/xxtz0522/article/details/114017129

版权

前端同时被 2 个专栏收录

51 篇文章 2 订阅

订阅专栏

Vue

8 篇文章 0 订阅

订阅专栏

template：

<el-button class="fullbutton" type="primary" plain @click="fullScreen">{{fullScreenFlag?'退出全屏':'全屏'}}</el-button>

js：

data () {
    return {
      fullScreenFlag: false, // 全屏/退出全屏
    }
  },

mounted () {
    document.addEventListener("fullscreenchange", this.fullScreenEsc)
  },
  destroyed () {
    document.removeEventListener("fullscreenchange", this.fullScreenEsc)
  },

fullScreen () {
      // this.$refs.iframe.requestFullscreen()
      this.fullScreenFlag = !this.fullScreenFlag
      if (this.fullScreenFlag) {
        this.$refs.wrapper.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    },
    fullScreenEsc () {
      if (!this.checkFull()) {
        this.fullScreenFlag = false
      }

    },
    checkFull () {
      var isFull =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
      //to fix : false || undefined == undefined
      if (isFull === undefined) isFull = false;
      return isFull;
    },

注意：监控esc退出全屏的方式，如果采用监听keydown的事件（key.code===27），全屏时会监控不到按键，因此采用监听fullscreenchange事件，同时用如上checkFull函数判断是否全屏

参考：

https://blog.csdn.net/weixin_44770377/article/details/106090877

keydown无法获取esc，参考处理：

https://blog.csdn.net/xiaoyanli8077/article/details/89537911