首先，在 Vue 組件中，可以使用 @click 或者 v-on 來監聽點擊事件，然后通過調用相應的方法來觸發全屏或關閉全屏。

執行requestFullscreen事件

<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) { // Firefoxelement.mozRequestFullScreen();} else if (element.webkitRequestFullscreen) { // Chrome, Safari and Operaelement.webkitRequestFullscreen();} else if (element.msRequestFullscreen) { // IE/Edgeelement.msRequestFullscreen();}isFullScreen.value = true;
}function exitFullScreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) { // Firefoxdocument.mozCancelFullScreen();} else if (document.webkitExitFullscreen) { // Chrome, Safari and Operadocument.webkitExitFullscreen();} else if (document.msExitFullscreen) { // IE/Edgedocument.msExitFullscreen();}isFullScreen.value = false;
}
</script>

也可以執行esc鍵進行關閉全屏并執行其他操作

const handleKeyDown = (event) => {if (event.key === 'Escape') {//esc鍵盤事件// 在退出全屏時執行其他操作};