vue篇之全屏功能

前言

前言不知道写什么，直接上代码

<!-- 不兼容IE -->
<template>
  <div
    class="screen-full"
    @click="handleFullScreen">
    <!-- {{ isFullscreen ? '退出' : '全屏' }} -->
    <i :class="isFullscreen ? 'el-icon-aim' : 'el-icon-full-screen'"></i>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      isFullscreen: false
    }
  },
  mounted () {
    // F11全屏，无法通过按钮退出全屏（因使用事件控制，会报警告，所以去掉）
    // window.addEventListener('keydown', this.keyDown, true)
    // 全屏状态下，无法监听ESC按键事件，监听窗口变化来监听退出全屏
    // window.addEventListener('resize', () => {
    //   if (!this.checkFull()) {
    //     this.isFullscreen = false
    //   }
    // }, true)
    // 优化： 全屏状态下，无法监听ESC按键事件，通过监听全屏事件来改变全屏状态
    void ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'].forEach((item) => {
      window.addEventListener(item, () => {
        console.log('窗口变化', this.checkFull())
        this.isFullscreen = this.checkFull()
      })
    })
  },
  methods: {
    // 按钮事件
    handleFullScreen () {
      this.isFullscreen ? this.screenfullOut() : this.screenfullEnter()
    },
    // 键盘事件
    // keyDown (e) {
    //   const el = e || window.event
    //   // 这样处理，会报警告“Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture”, 这是因为全屏只能从事件触发（用户事件操作），而不能用代码直接触发
    //   if (el.keyCode === 122) {
    //     el.returnValue = false
    //     this.screenfullEnter()
    //   }
    // },
    // 进入全屏
    screenfullEnter () {
      const el = document.documentElement
      const eventEnter =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen
      if (typeof eventEnter !== 'undefined' && eventEnter) {
        eventEnter.call(el)
        // this.isFullscreen = true
      }
    },
    // 退出全屏
    screenfullOut () {
      let eventOut =
        document.cancelFullScreen ||
        document.webkitCancelFullScreen ||
        document.mozCancelFullScreen ||
        document.msExitFullScreen
      if (typeof eventOut !== 'undefined' && eventOut) {
        eventOut.call(document)
        // this.isFullscreen = false
      }
    },
    // 检测是否全屏
    checkFull () {
      let isFull =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
      if (isFull === undefined) isFull = false
      return isFull
    }
  }
}
</script>

<style lang="scss" scoped>
.screen-full {
  position: fixed;
  top: 0;
  right: 0;
  width: 40px;
  height: 32px;
  line-height: 28px;
  text-align: center;
  // border: 2px solid rgba(2, 228, 235, 0.65);
  // box-shadow: 0 0 1px 6px rgba(2, 228, 235, 0.2);
  // border-radius: 5px 0 0 5px;
  cursor: pointer;
  // transition: all 0.3s;
  overflow: hidden;
  i {
    font-size: 24px;
    color: #FFFFFF;
  }
  // &:hover {
  //   right: 0px;
  // }
}

</style>

注意

全屏状态下，无法监听ESC按键事件，通过监听全屏事件来改变全屏状态进而控制图标展示

存在的问题

F11全屏，无法通过按钮退出全屏 这个问题虽然可以通过阻止F11全屏事件，使用键盘事件触发全屏事件，但是这样处理，会报警告“Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture”, 这是因为全屏只能从事件触发（用户事件操作），而不能用代码直接触发