web-dev-qa-db-fra.com

Fermer la boîte de dialogue lorsque vous appuyez sur la touche ECHAP

Comment puis-je fermer un dialogue ouvert sans activateur, lorsque l'utilisateur appuie sur la touche Échap du clavier?

vuetify.js
8
benno

Ajouter @keydown.esc="dialog = false" au composant v-dialog

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

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

Exemple de travail: https://codepen.io/anon/pen/BJOOOQ

De plus, si vous utilisez dialog en tant que composant personnalisé, nous devons éventuellement émettre un événement d'entrée:

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

ce code peut peut-être vous aider

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

Ce que vous voulez utiliser est un modificateur de clé. Vous pouvez utiliser la directive v-on:keyup.esc dans votre boîte de dialogue pour détecter si la clé escape est détectée.

Lisez ceci pour plus d'informations sur les modificateurs de clé

0
dovahkiin