vue项目requestFullscreen开启全屏后怎么监控退出全屏

在Vue项目中，你可以使用 `document` 对象的 `fullscreenchange` 事件来监控全屏状态的变化。当进入或退出全屏时，该事件都会被触发。以下是一个简单的示例代码：

<template>
  <div>
    <button @click="enterFullscreen">进入全屏</button>
    <button @click="exitFullscreen">退出全屏</button>
  </div>
</template>

<script>
export default {
  methods: {
    enterFullscreen() {
      const elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      }
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', () => {
      const isFullscreen = document.fullscreenElement !== null;
      console.log(`Fullscreen mode is ${isFullscreen ? 'on' : 'off'}.`);
    });
  }
};
</script>

在 `mounted` 钩子函数中，我们使用 `addEventListener` 方法来监听 `fullscreenchange` 事件。当事件触发时，我们可以通过 `document.fullscreenElement` 属性来判断当前是否处于全屏状态，并进行相应的处理。