ユーザーがキーボードのEscキーを押したときに、アクティベーターなしで開いたVuetifyの ダイアログ を閉じるにはどうすればよいですか?
追加 @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')">
...
このコードはおそらくあなたを助けることができます
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;
}
});
},
これが私がそれを動作させることができた唯一の方法です:-/
mounted() {
// Close modal with 'esc' key
document.addEventListener("keydown", (e) => {
if (e.keyCode == 27) {
this.$emit('close');
}
});
},
vueコンポーネントにkeypressバインディングを追加するのと同じ原理-次のコードをv-dialogコンポーネントに追加します:
@keydown.esc="dialog = false"
実際の例(閉じるボタンのクリックイベントハンドラにも注意してください)
使用したいのはキー修飾子です。ダイアログでv-on:keyup.esc
ディレクティブを使用して、escape
キーが検出されたかどうかを検出できます。
キー修飾子の詳細については this を参照してください