web-dev-qa-db-ja.com

Escキーが押されたときにダイアログを閉じる

ユーザーがキーボードのEscキーを押したときに、アクティベーターなしで開いたVuetifyの ダイアログ を閉じるにはどうすればよいですか？

vue.jsvuejs2vuetify.js
15
benno

追加 @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')">
  ...
23
Traxo

このコードはおそらくあなたを助けることができます

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

これが私がそれを動作させることができた唯一の方法です：-/

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

vueコンポーネントにkeypressバインディングを追加するのと同じ原理-次のコードをv-dialogコンポーネントに追加します：

 @keydown.esc="dialog = false"

実際の例（閉じるボタンのクリックイベントハンドラにも注意してください）

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

0
Yordan Georgiev

使用したいのはキー修飾子です。ダイアログでv-on:keyup.escディレクティブを使用して、escapeキーが検出されたかどうかを検出できます。

キー修飾子の詳細については this を参照してください

0
dovahkiin