按下 ESC 键时关闭对话框

Question

当用户按下键盘上的 ESC 键时，如何关闭没有激活器打开的 vuetify 对话框？

原文由 Benno Eggnauer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

添加 @keydown.esc="dialog = false" 到 v-dialog 组件

<v-dialog v-model="dialog" @keydown.esc="dialog = false"></v-dialog>

data: () => ({
  dialog: false
}),

工作示例： https ://codepen.io/anon/pen/BJOOOQ

---

此外，如果使用对话框作为自定义组件，那么我们可能需要发出输入事件：

 <template>
  <v-dialog :value="value" @keydown.esc="$emit('input')">
  ...

原文由 Traxo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是我能够让它工作的唯一方法

mounted() {
    // Close modal with 'esc' key
    document.addEventListener("keydown", (e) => {
        if (e.keyCode == 27) {
            this.$emit('close');
        }
    });
},

原文由 Dazzle 发布，翻译遵循 CC BY-SA 4.0 许可协议