按下 ESC 键时关闭对话框

Question

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

Answer 1

您要使用的是 Key Modifier。您可以在对话框中使用 v-on:keyup.esc 指令来检测是否检测到 escape 键。

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

Answer 2

这段代码也许能帮到你

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 3

将 @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 4

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

 @keydown.esc="dialog = false"

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

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

Answer 5

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

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

Answer 6

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

设置 no-click-animation 属性也会修复关闭时的动画，否则它会同时播放关闭和弹跳动画：

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

Answer 7

@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
        }
    })
}

按下 ESC 键时关闭对话框

Close dialog when ESC key is pressed

vue.js

vuejs2

vuetify.js