使用vue3.2监听全屏还是半个屏幕监听F11键

在Vue 3.x中，要监听全屏或半屏状态的变化，以及F11键的切换，你可以使用`beforeDestroy`生命周期钩子配合`IntersectionObserver` API来检测视口是否进入全屏模式。F11键的监听通常需要结合浏览器的`keydown`事件。

这里是一个简单的示例：

<template>
  <div ref="observerRef"></div> <!-- 观察元素 -->
</template>

<script>
export default {
  beforeDestroy() {
    // 监听F11键按下
    document.addEventListener('keydown', handleF11Key);
    // 创建Intersection Observer实例
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && entry.target === this.$refs.observerRef) {
            console.log('Screen is now full screen or half screen');
          } else {
            console.log('Screen is no longer full screen or half screen');
          }
        });
      },
      { rootMargin: '0px', threshold: [0, 0.5] } // 半屏阈值设置为0.5
    );

    // 初始化观察
    observer.observe(this.$refs.observerRef);
    
    // F11监听处理函数
    function handleF11Key(event) {
      if (event.key === 'F11') {
        console.log('F11 key pressed, check for full screen state change');
        // 在这里可以根据需要进一步检查全屏状态变化
      }
    }
  },
};
</script>

注意，这个示例并没有实时更新全屏/非全屏状态，因为`IntersectionObserver`主要用于检测元素是否出现在视口中，并不适合实时判断F11的状态。对于F11的状态，你可能需要借助更复杂的方式，如监听window的`fullscreenchange`事件。