按ESC键时关闭对话框

Question

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

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')">
  ...

Answer 2

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

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

Answer 3

这段代码也许可以帮助你

mounted() {
        let self = this;
        window.addEventListener('keyup', function(event) {
            // If  ESC key was pressed...
            if (event.keyCode === 27) {
                // try close your dialog
                self.advanced_search = false;
            }
        });
    },