vue中设置全屏和退出全屏,esc和f11的按键事件的特殊处理

//mounted中
	//本来想直接禁掉esc的键盘按下的默认行为的,但是浏览器会有个提示,并且百度看了众多解决方案,这个提示貌似不好去掉
    // if (navigator.keyboard && navigator.keyboard.lock) {
    //   // 禁用esc退出全屏
    //   navigator.keyboard.lock(['Escape'])
    // } else {
    //   console.log('您的浏览器上不支持该功能')
    // }
    //这个方式去监听F11,会有监听不到的情况
    // document.onkeydown = (e) => {
    //   console.log('e: ', e)
    //   if (e.code === 'F11') e.preventDefault()
    // }
    
    window.addEventListener('keydown', function(event) {
      //禁掉F11的全屏的默认事件,不会禁止F11的退出全屏
      const e = event || window.event
      if (e && e.keyCode === 122) {
        e.preventDefault()
      }
    })
    document.addEventListener('fullscreenchange', () => {
      this.isOpenAll = !this.isOpenAll
      //这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,会自动调用fullScreenEvent方法
    })
    document.addEventListener('mozfullscreenchange', () => {
      this.isOpenAll = !this.isOpenAll
    })
    document.addEventListener('webkitfullscreenchange', () => {
      this.isOpenAll = !this.isOpenAll
    })
    document.addEventListener('msfullscreenchange', () => {
      this.isOpenAll = !this.isOpenAll
    })

//methods里面
fullScreenEvent() {
		//这个方法名就叫这个名字,不要取别的名字
      if (!this.isOpenAll) {
        const box = document.documentElement
        if (box.RequestFullScreen) {
          box.RequestFullScreen()
        } else if (box.requestFullscreen) {
          box.requestFullscreen()
        } else if (box.mozRequestFullScreen) {
          box.mozRequestFullScreen()
        } else if (box.msRequestFullscreen) {
          box.msRequestFullscreen()
        } else if (box.oRequestFullscreen) {
          box.oRequestFullscreen()
        } else if (box.webkitRequestFullscreen) {
          box.webkitRequestFullScreen()
        }
      } else {
        const el = document
        if (el.exitFullscreen) {
          el.exitFullscreen()
        } else if (el.mozCancelFullScreen) {
          /* Firefox */
          el.mozCancelFullScreen()
        } else if (el.webkitExitFullscreen) {
          /* Chrome, Safari and Opera */
          el.webkitExitFullscreen()
        } else if (el.msExitFullscreen) {
          /* IE/Edge */
          el.msExitFullscreen()
        }
      }
    }