Vue组件模板中@keyup.esc绑定失效问题求助

看起来你遇到的问题是Vue组件模板里的@keyup.esc="closeModal"没触发，但在Twig模板里正常——这其实是因为Vue的键盘事件绑定默认是绑定在当前元素上，只有当该元素处于聚焦状态时，键盘事件才会被捕获。而Twig模板里的绑定大概率是挂在body或者根容器这类始终能捕获全局键盘事件的元素上，所以能正常响应ESC键。

下面给你几个可行的解决方案：

方案1：全局监听键盘事件（推荐） #

在组件的生命周期钩子中，直接给document或者window添加ESC键的监听，这样不管焦点在哪里，只要按下ESC就能触发关闭方法。记得在组件销毁前移除监听，避免内存泄漏。

Options API 示例： #

<script>
export default {
  methods: {
    closeModal() {
      // 你的关闭模态框逻辑
      this.isModalOpen = false;
    },
    handleEscKey(event) {
      if (event.key === 'Escape') {
        this.closeModal();
      }
    }
  },
  mounted() {
    document.addEventListener('keyup', this.handleEscKey);
  },
  beforeUnmount() {
    document.removeEventListener('keyup', this.handleEscKey);
  }
}
</script>

Composition API (Vue 3) 示例： #

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const isModalOpen = ref(false);

const closeModal = () => {
  isModalOpen.value = false;
};

const handleEscKey = (event) => {
  if (event.key === 'Escape') {
    closeModal();
  }
};

onMounted(() => {
  document.addEventListener('keyup', handleEscKey);
});

onUnmounted(() => {
  document.removeEventListener('keyup', handleEscKey);
});
</script>

方案2：让模态框容器可聚焦并绑定事件 #

如果不想用全局监听，可以给模态框的根元素添加tabindex="-1"（这样它可以被聚焦但不会被Tab键选中），然后绑定@keyup.esc，同时在打开模态框时自动聚焦该元素。

示例代码：

<template>
  <div v-if="isModalOpen" class="modal-container" tabindex="-1" @keyup.esc="closeModal" ref="modalRef">
    <!-- 模态框内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isModalOpen: false,
      modalRef: null
    };
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
      // 打开后延迟聚焦，确保DOM已渲染
      this.$nextTick(() => {
        this.$refs.modalRef.focus();
      });
    },
    closeModal() {
      this.isModalOpen = false;
    }
  }
};
</script>

这个方法的核心是tabindex="-1"让元素获得了聚焦能力，当它被聚焦后，键盘事件就能被捕获到，@keyup.esc自然就能触发了。

内容的提问来源于stack exchange，提问作者publicator