Vuetify对话框切换Tab后Esc键失效，如何恢复Esc关闭功能？

方案一：使用Vuetify内置的escape-key事件（优先推荐） #

Vuetify的v-dialog组件自带了专门响应Esc键的@escape-key事件，它会在对话框处于激活状态时全局监听Esc操作，不受Tab切换导致的焦点变化影响，直接替换你原来的@keydown.esc即可：

<v-dialog v-model="dialogVisible" @escape-key="closeDialog(true)">
  <!-- 你的Tabs内容 -->
  <v-tabs>
    <v-tab-item>...</v-tab-item>
    <v-tab-item>...</v-tab-item>
  </v-tabs>
</v-dialog>

方案二：全局键盘事件监听（兼容特殊场景） #

如果内置事件不满足需求，可以在对话框打开时给window注册全局键盘监听，关闭时移除，确保任何焦点状态下都能响应Esc：

// 打开对话框的方法
openDialog() {
  this.dialogVisible = true;
  window.addEventListener('keydown', this.handleEscPress);
},

// 关闭对话框的方法
closeDialog(force) {
  this.dialogVisible = false;
  window.removeEventListener('keydown', this.handleEscPress);
  // 你的其他关闭逻辑
},

// 处理Esc按键
handleEscPress(event) {
  if (event.key === 'Escape') {
    this.closeDialog(true);
  }
}

失效原因说明 #

切换Tab后，页面焦点会转移到Tab内部的元素上，你之前绑定在v-dialog、Tabs组件上的@keydown.esc依赖事件冒泡传递，但焦点元素的键盘事件可能无法冒泡到这些容器组件；而Vuetify内置的escape-key事件是组件内部封装的全局监听逻辑，能规避焦点变化带来的影响。

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