vue3点击按钮实现全屏和取消全屏效果_vue3点击全屏组件

出现的问题1：用fullscreenchange监听全屏状态的改变时，发现在Chrome浏览器中，无法正确触发该事件，这个问题是由于Chrome浏览器的缺陷引起的。Chrome使用了Webkit引擎，在处理全屏模式时存在一些不一致性。具体来说，Chrome没有正确地实现fullscreenchange事件

解决办法：用resize替换，监听页面的resize事件，根据页面高度是否等于全屏高度判断是否处于全屏状态，具体代码如下：

<template>
   <el-button type="primary" @click="screen">{{ fullscreenText }}</el-button>
</template>

const fullscreen = ref(false)
const fullscreenText = ref('全屏')
if (window.innerHeight === window.screen.height) {
//判断初始化后，是否处于全屏状态
  fullscreen.value = true
  fullscreenText.value = '取消全屏'
}
onMounted(() => {
  //监听页面是否全屏，fullscreen为true代表全屏状态，
  window.addEventListener('resize', () => {
    if (window.innerHeight === window.screen.height) {
      //全屏
      fullscreen.value = true
      fullscreenText.value = '取消全屏'
    } else {
      fullscreen.value = false
      fullscreenText.value = '全屏'
    }
  })
})

具体点击全屏的代码：

 
const screen = () => {
  let element = document.documentElement;
  if (fullscreen.value) {
//退出全屏操作
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    fullscreenText.value = '全屏'
  } else {
//全屏操作
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
    fullscreenText.value = '取消全屏'
  }
//全屏状态取反
  fullscreen.value = !fullscreen.value;
}

 出现的问题2:通过按钮点击进入的全屏，不能通过键盘F11退出，相反，通过键盘F11进入的全屏，也不能通过按钮点击退出，

解决方法：通过监听keydown事件，取消F11按钮默认事件，用js按钮点击方法代替，代码如下：

//解决按F11实现的全屏，用api不能退出问题,
//之前窗口对象window不能监听到keydowm事件，最好用文档对象document代替
document.addEventListener('keydown', e => {
  e = e || window.event
  if (e.keyCode === 122) {
    //取消f11按钮，用screen方法替代
    e.preventDefault()
    screen()
  }
})