vue单存判断浏览器是否处于全屏状态

在Vue中，你可以使用`beforeMount`生命周期钩子以及`fullscreenchange`事件来监测浏览器是否处于全屏状态。这里是一个简单的示例：

<template>
  <div ref="elementRef">
    <button @click="enterFullscreen">进入全屏</button>
    <p v-if="isFullScreen">当前正在全屏模式</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFullScreen: false,
    };
  },
  beforeMount() {
    this.addEventListener('fullscreenchange', this.updateIsFullScreen);
  },
  mounted() {
    this.updateIsFullScreen();
  },
  methods: {
    enterFullscreen() {
      if (!this.isFullScreen && document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      }
    },
    updateIsFullScreen() {
      this.isFullScreen = !!document.fullscreenElement;
    },
    // 在组件卸载前移除监听器，以避免内存泄漏
    beforeDestroy() {
      this.removeEventListener('fullscreenchange', this.updateIsFullScreen);
    },
  },
};
</script>

在这个例子中，`updateIsFullScreen`函数会在用户切换到全屏或离开全屏时被触发，更新`isFullScreen`的状态。