实现某个模块进入全屏和退出全屏

通过requestFullscreen方法进入全屏模式，再通过监听特定的情况通过exitFullscreen退出全屏模式

<template>
  <div style="width: 100px; height: 100px; background: green" id="box"></div>
  <button @click="enterFull">进入全屏模式</button>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    const element = ref<HTMLElement | null>(null)
    onMounted(() => {
      element.value = document.getElementById('box')
      addEventListener('keydown', quitFull) //监听到键盘任意键按下则退出全屏
    })
    const enterFull = () => {
      launchFullscreen(element.value)
    }
    const quitFull = () => {
      exitFullscreen(element.value)
    }
    //进入全屏
    const launchFullscreen = (element: any) => {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen()
      }
    }
    //退出全屏
    const exitFullscreen = (element: any) => {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (element.mozCancelFullScreen) {
        //兼容Firefox
        element.mozCancelFullScreen()
      } else if (element.webkitExitFullscreen) {
        //兼容Chrome, Safari and Opera等
        element.webkitExitFullscreen()
      } else if (element.msExitFullscreen) {
        //兼容IE/Edge
        element.msExitFullscreen()
      }
    }
    return {
      element,
      launchFullscreen,
      exitFullscreen,
      enterFull,
      quitFull,
    }
  },
})
</script>
<style scoped></style>