vue3 全屏

<template>
  <button @click="toggleFullScreen">Toggle Full Screen</button>
</template>
 
<script setup>
import { ref } from 'vue';
 
const isFullScreen = ref(false);
 
const toggleFullScreen = () => {
  if (!document.fullscreenElement && !isFullScreen.value) {
    // 进入全屏
    document.documentElement.requestFullscreen().then(() => {
      isFullScreen.value = true;
    });
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen().then(() => {
        isFullScreen.value = false;
      });
    }
  }
};
</script>