vue全屏事件与关闭全屏事件

<template>
  <div>
    <button @click="enterFullScreen">进入全屏</button>
    <button @click="exitFullScreen">退出全屏</button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const isFullScreen = ref(false);
function enterFullScreen() {
  const element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
  isFullScreen.value = true;
}
function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen();
  }
  isFullScreen.value = false;
}
</script>

const handleKeyDown = (event) => {
   if (event.key === 'Escape') {//esc键盘事件
      // 在退出全屏时执行其他操作
};