vue 使用screenfull全屏插件后，F11和ESC导致的问题解决

我们在使用screenfull插件时，会产生几个问题：

　　1.F11的全屏无法监听到

　　2.ESC的监听（尤其是在使用F11开启全屏后，ESC无法监听）

 

主要解决方法可参考如下代码：

import screenfull from 'screenfull'//引入插件

//全屏判断（判断全屏和非全屏图标的转换）
const isFullscreen = ref(false)
//全屏展示
const fullScreen = () => {
    //判断当前窗口是否允许全屏
  if (screenfull.isEnabled && !screenfull.isFullscreen) {
    screenfull.request()
    isFullscreen.value = true
  }
}
//退出全屏
const exitFullScreen = () => {
 //判断当前窗口是否允许全屏
  if (screenfull.isEnabled && screenfull.isFullscreen) {
    screenfull.exit()
    isFullscreen.value = false
  }
}
// F11监听方法
const KeyDown = (e) => {
  //F11按键触发全屏事件
  if (e.keyCode === 122) {
    //阻止F11案件默认事件，通过调用screenfull的方法来实现全屏和非全屏操作（这一步非常重要！！！！！）
    e.preventDefault(); 
    screenfull.toggle()
  }
}
// 组件挂载后
onMounted(() => {
    //监听screenfull属性的变化来改变图标
  screenfull.on('change', () => {
    screenfull.isFullscreen
      ? (isFullscreen.value = true)
      : (isFullscreen.value = false)
  })
  // 针对f11全屏无法监听问题
  window.addEventListener('keydown', KeyDown, true)
})
// 组件卸载前
onBeforeUnmount(() => {
  screenfull.on('off', () => {})
})