首先,在 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) { // 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>
也可以执行esc键进行关闭全屏并执行其他操作
const handleKeyDown = (event) => {
if (event.key === 'Escape') {//esc键盘事件
// 在退出全屏时执行其他操作
};