pc端页面全屏 解决 esc 取消全屏 点击 失效bug vue3 vue2 适用

先看效果图：

 

附上代码：

 

<template>
    <button @click="fullScreen"> {{ fullscreen ? '取消全屏' : '全屏' }} </button>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'

let router = useRouter()

const fullscreen = ref(false)

let fullScreen = () => {
  if (fullscreen.value) {
      const doc = document
      const exitFullScreen =
          doc.exitFullscreen ||
          doc.webkitCancelFullScreen ||
          doc.mozCancelFullScreen ||
          doc.msExitFullscreen
      if (exitFullScreen) {
          exitFullScreen.call(doc)
      }
  } else {
      const htmlDOM = document.documentElement
      const enterFullScreen =
          htmlDOM.requestFullscreen ||
          htmlDOM.webkitRequestFullScreen ||
          htmlDOM.mozRequestFullScreen ||
          htmlDOM.msRequestFullscreen
      if (enterFullScreen) {
          enterFullScreen.call(htmlDOM)
      } else {
          this.$message({
              type: 'warning',
              message: '您的浏览器不支持全屏浏览，请升级或更换浏览器！'
          })
      }
  }
}

onMounted(() => {
  document.addEventListener("fullscreenchange", () => {
    fullscreen.value = !fullscreen.value
  })
  document.addEventListener("mozfullscreenchange", () => {
    fullscreen.value = !fullscreen.value
  })
  document.addEventListener("webkitfullscreenchange", () => {
    fullscreen.value = !fullscreen.value
  })
  document.addEventListener("msfullscreenchange", () => {
    fullscreen.value = !fullscreen.value
  })
})

</script>