解决VUE在浏览器全屏下监听不到Esc键盘事件

实测可以在谷歌、火狐、360 浏览器使用

解决了在浏览器全屏下监听不到键盘Esc事件

解决了取消全屏和全屏的同步问题，ESC按键下可以同步

以下是完整的代码，

//
data() {
      return {
         isFullscreen: false,
      }
},
created(){
	let that = this
	window.onresize = function(){
	  if(!that.checkFull()){
		// 退出全屏后要执行的动作
		console.log("退出全屏")
	  }
	}
},

 methods:{
		checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      let isFull = document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull;
    },

// 全屏&退出全屏
    toggleFullSceen() {
      let doc = document.documentElement
      if (this.isFullScreen) {
        // 退出全屏
        if (document.webkitExitFullscreen) {
          //Chrome等
          document.webkitExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          //FireFox
          document.mozCancelFullScreen()
        } else if (document.exitFullscreen) {
          //W3C
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          //IE11
          document.msExitFullscreen()
        }
      } else {
        if (doc.webkitRequestFullScreen) {
          // chorme等
          doc.webkitRequestFullScreen()
        } else if (doc.mozRequestFullScreen) {
          // FireFox
          doc.mozRequestFullScreen()
        } else if (doc.requestFullscreen) {
          // W3C
          doc.requestFullscreen
        } else if (doc.msRequestFullscreen) {
          //IE11
          doc.msRequestFullscreen()
        }
      }
      this.isFullScreen = !this.isFullScreen
    },
}

参考资料：https://www.it610.com/article/1296862890581630976.htm

改良后的代码：

mounted() {
    //初始化全屏状态
    this.isFullScreen = this.checkFull()
    // 监听F11按键事件
    window.addEventListener('keydown', this.keydowns, true)
    // ESC按键事件无法监听，监听窗口变化事件
    window.onresize = () => {
      this.isFullScreen = this.checkFull()
    }
  },

method方法：

//判断浏览器是否处于全屏状态 （需要考虑兼容问题）
    checkFull() {
      //火狐浏览器
      let isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled

      return !!isFull
    },
    // 全屏&退出全屏
    toggleFullSceen() {
      let doc = document.documentElement
      if (this.isFullScreen) {
        // 退出全屏
        if (document.webkitExitFullscreen) {
          //Chrome等
          document.webkitExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          //FireFox
          document.mozCancelFullScreen()
        } else if (document.exitFullscreen) {
          //W3C
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          //IE11
          document.msExitFullscreen()
        }
      } else {
        if (doc.webkitRequestFullScreen) {
          // chorme等
          doc.webkitRequestFullScreen()
        } else if (doc.mozRequestFullScreen) {
          // FireFox
          doc.mozRequestFullScreen()
        } else if (doc.requestFullscreen) {
          // W3C
          doc.requestFullscreen
        } else if (doc.msRequestFullscreen) {
          //IE11
          doc.msRequestFullscreen()
        }
      }
      this.isFullScreen = !this.isFullScreen
    },
    keydowns(event) {
      // 监听按键f11
      if (event.keyCode === 122) {
        event.returnValue = false
        this.toggleFullSceen() //触发全屏的按钮
      }
    },