vue3 如何实现将一个div全屏, 是整个屏幕全屏，不是网页里全屏

在 Vue3 中，要实现在浏览器窗口中全屏显示一个 `div` 元素，而不是整个网页的全屏，你可以利用现代浏览器提供的 API，如 CSS 的 `fullscreen` 属性和 JavaScript 的事件处理。以下是一种简单的方法：

1. 首先，在你的组件模板中添加一个点击按钮或者绑定一个事件到 div 上，用于触发全屏模式：

<template>
  <button @click="enterFullScreen">全屏</button>
  <div ref="fullscreenDiv" class="your-div-class"></div>
</template>

2. 然后，在 `script` 部分中，创建一个 `methods` 对象，并编写进入全屏的 `enterFullScreen` 方法：

<script setup>
import { onMounted } from 'vue';

const ref = ref(null);
function enterFullScreen() {
  if (ref.value.requestFullscreen) { // 判断支持fullscreen API
    ref.value.requestFullscreen();
  } else if (ref.value.mozRequestFullScreen) { // Firefox兼容
    ref.value.mozRequestFullScreen();
  } else if (ref.value.webkitRequestFullscreen) { // Chrome/Safari兼容
    ref.value.webkitRequestFullscreen();
  }
}
onMounted(() => {
  ref.value = document.querySelector('.your-div-class');
});
</script>

3. 在样式文件中（`.vue` 文件内或单独的 `.css` 文件），设置一些基本样式，比如隐藏滚动条等：

.your-div-class {
  /* 如果你想让 div 完全占据屏幕 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden; /* 隐藏滚动条 */
}

/* 进入全屏时，div 自适应屏幕 */
.fullscreen .your-div-class {
  position: absolute; /* 或者 display: flex/flex-item; 视具体需求而定 */
  transform: none !important;
  -webkit-transform: none !important;
}

4. 当需要退出全屏时，可以在页面上添加一个退出全屏的按钮，监听 `fullscreenchange` 或 `mozfullscreenchange`（Firefox）、`webkitfullscreenchange`（Chrome/Safari）事件：

function exitFullScreen() {
  const element = document.exitFullscreen || 
                 document.mozCancelFullScreen || 
                 document.webkitExitFullscreen;
  if (element) {
    element.call(document);
  }
}

// 监听退出全屏事件
document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    exitFullScreen();
  }
}, false);