管理后台全屏模式功能讲解

管理后台全屏模式功能讲解

一. 需要考虑到的地方

1. F11
2. esc
3. 全屏时的X按钮
4. 主动进入、退出

二. 解决方案

1. 监听onkeydown事件,拦截F11,手写进入全屏逻辑
2. 监听onresize事件,获取当前全屏状态，进行操作

三. 代码实现

  data() {
    return {
      isFullscreen: false // 管理全屏状态
    }
  },
  mounted() {
    // 快捷键判断
    window.onkeydown = (e) => {
      this.keyJudgment(e)
    }

    // 判断全屏状态
    this.isFullscreen = this.isFullScreens()
    window.onresize = () => {
      this.isFullscreen = this.isFullScreens()
    }
  },
  methods: {
    // 判断是否为全屏
    isFullScreens() {
      return (
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        false
      )
    },

    // F11快捷键判断
    keyJudgment(e) {
      const keyCode = e.keyCode || e.which || e.charCode
      const altKey = e.altKey
      const shiftKey = e.shiftKey
      const ctrlKey = e.ctrlKey
      if (!altKey && !ctrlKey && !shiftKey && keyCode === 122) {
        this.fullscreenChange()
        e.preventDefault()
        return
      }
    },

    // 全屏切换
    fullscreenChange() {
      this.isFullscreen = !this.isFullscreen
      const el = document.documentElement
      if (this.isFullscreen) {
        const rfs =
          el.requestFullScreen ||
          el.webkitRequestFullScreen ||
          el.mozRequestFullScreen ||
          el.msRequestFullscreen
        if (typeof rfs !== undefined && rfs) {
          rfs.call(el)
        }
        return
      } else {
        const newRFS =
          document.exitFullscreen ||
          document.msExitFullscreen ||
          document.mozCancelFullScreen ||
          document.webkitExitFullscreen
        newRFS.call(document)
      }
    }
  }