退出键在vuejs中不适用于第二模式窗口

<template>
  <div @keydown.capture.escape="handleEscape">
    <!-- 模态框内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleEscape() {
      // 处理退出逻辑
      console.log('Esc键被按下');
    }
  }
}
</script>

<template>
  <div ref="modal" tabindex="-1">
    <!-- 模态框内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.modal.focus();
  },
  methods: {
    openModal() {
      this.$refs.modal.focus();
    },
    closeModal() {
      // 关闭模态框逻辑
    }
  }
}
</script>

<template>
  <div v-esc="handleEscape">
    <!-- 模态框内容 -->
  </div>
</template>

<script>
export default {
  directives: {
    esc: {
      inserted(el, binding) {
        const handler = (event) => {
          if (event.key === 'Escape') {
            binding.value();
          }
        };
        window.addEventListener('keydown', handler);
        el._escHandler = handler;
      },
      unbind(el) {
        window.removeEventListener('keydown', el._escHandler);
      }
    }
  },
  methods: {
    handleEscape() {
      // 处理退出逻辑
      console.log('Esc键被按下');
    }
  }
}
</script>