vue2在全屏状态下如何监听esc

你可以使用 Vue 的事件监听机制来监测全屏状态下的 ESC 键按下事件。首先，你需要在组件的 `mounted` 钩子函数中添加全屏状态的监测代码，然后在组件销毁时移除监听。

下面是一个示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 监听全屏状态下的 ESC 键按下事件
    document.addEventListener("fullscreenchange", this.handleEscKey);
    document.addEventListener("webkitfullscreenchange", this.handleEscKey);
    document.addEventListener("mozfullscreenchange", this.handleEscKey);
    document.addEventListener("MSFullscreenChange", this.handleEscKey);
  },
  beforeDestroy() {
    // 移除监听
    document.removeEventListener("fullscreenchange", this.handleEscKey);
    document.removeEventListener("webkitfullscreenchange", this.handleEscKey);
    document.removeEventListener("mozfullscreenchange", this.handleEscKey);
    document.removeEventListener("MSFullscreenChange", this.handleEscKey);
  },
  methods: {
    handleEscKey(event) {
      // 判断是否为 ESC 键按下事件
      if (
        (event.key === "Escape" || event.keyCode === 27) &&
        (document.fullscreenElement ||
          document.webkitFullscreenElement ||
          document.mozFullScreenElement ||
          document.msFullscreenElement)
      ) {
        // 在这里处理 ESC 键按下事件
        console.log("ESC 键按下");
      }
    },
  },
};
</script>

在上面的示例中，我们通过监听 `fullscreenchange` 事件来检测全屏状态的改变，并在 `handleEscKey` 方法中判断是否为 ESC 键按下事件。如果是 ESC 键按下，并且当前处于全屏状态，你可以在该方法中进行相应的操作。

这样，当你的 Vue 组件处于全屏状态时，就能够监听到 ESC 键按下事件了。