按下 ESC 键时关闭对话框

Question

当用户按键盘上的 ESC 键时，如何关闭在没有激活器的情况下打开的 vuetify dialog？

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')">
    <!-- content -->
  </v-dialog>
</template>

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;
            }
        });
    },

Answer 4

与向任何 vue 组件添加按键绑定相同的原理应该有效 - 将以下代码添加到 v-dialog 组件：

 @keydown.esc="dialog = false"

工作示例（还要注意关闭按钮单击事件处理程序）

https://codepen.io/yordangeorgiev/pen/WBeMGq

Answer 5

虽然其他人提到的解决方案有效，但仍然与弹跳动画存在冲突，导致通过单击对话框外部等方式播放后无法正常工作。

设置

no-click-animation

属性还会修复关闭时的动画，否则它会同时播放关闭和弹起动画：

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

Answer 6

@keydown.esc 不适用于我的项目。据我所知，这对于 Vue2 项目很有好处。

工作脚本：

mounted() {
    document.addEventListener("keydown", (e) => {
        if (e.key === 'Escape') {
            this.$emit('close');
            // Or any other way you want to close your modal
        }
    })
}

Answer 7

您要使用的是键修饰符。您可以在对话框中使用

v-on:keyup.esc

指令来检测是否检测到

escape

键。

阅读 this 了解有关按键修饰符的更多信息