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

Answer 2

这是我能够使用它的唯一方法：-/

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

Answer 3

您要使用的是键修饰符。您可以在对话框中使用<!DOCTYPE HTML> <html> <head> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8">  <style> body { width: 960px; margin: 0 auto 0; } </style> </head> <body> <header> </header> <div> <script src="//content.jwplatform.com/players/JGjET8HV-DzNBF8a9.js"></script> </div> </body> </html>指令来检测是否检测到v-on:keyup.esc密钥。

阅读this以获取有关键修饰符的更多信息

Answer 4

这段代码也许可以帮到你

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 5

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

 @keydown.esc="dialog = false"

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

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

Answer 6

虽然其他人提到的解决方案可行，但与跳动动画仍然存在冲突，通过在对话框外部单击来播放它，使其无法正常工作。

设置urlRequest.cURL(pretty: true)属性还会在关闭时修复动画，否则会同时播放close和bounce动画：

no-click-animation

按ESC键时关闭对话框

6 个答案: