<template>
  <div @click="toggleFullScreen" title="全屏">
    <w-icon v-if="!isFullScreen" icon-class="fullscreen" />
    <w-icon v-else icon-class="fullscreen-exit" />
  </div>
</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;
      });
    }
  }
};
 
// 监听全屏状态变化
document.addEventListener('fullscreenchange', () => {
  isFullScreen.value = !!document.fullscreenElement;
});
</script>