ESC 키를 누르면 대화 상자 닫기

ESC 키를 누르면 대화 상자 닫기

사용자가 키보드의 ESC 키를 누를 때 활성화기 없이 열린 뷰에티파이 대화 상자를 닫으려면 어떻게 해야 하는가?

추가하다@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() {
    // Close modal with 'esc' key
    document.addEventListener("keydown", (e) => {
        if (e.keyCode == 27) {
            this.$emit('close');
        }
    });
},

이 코드는 아마도 당신을 도울 수 있을 것이다.

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

vue 구성 요소에 keypress 바인딩을 추가하는 것과 동일한 원칙 - v-properties 구성 요소에 다음 코드를 추가하십시오.

 @keydown.esc="dialog = false"

작업 예제(Close(닫기) 버튼 클릭 이벤트 핸들러도 참고)

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

사용하려는 것은 키 수정자 입니다.사용할 수 있다v-on:keyup.escDialog에서 다음 중 어느 것을 탐지할 것인지에 대한 지시escape키가 감지됨.

키 수정자에 대한 자세한 내용은 이 항목을 참조하십시오.

남들이 언급한 해법이 먹히는 동안에도 바운스 애니메이션과 충돌해 대화 상자 바깥을 클릭해 재생한 뒤 작동하지 않는 등 문제가 있다.

설정no-click-animation속성은 닫힘 및 바운스 애니메이션을 재생하는 것처럼 닫힘 시 애니메이션을 수정한다.

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

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

참조URL: https://stackoverflow.com/questions/46281832/close-dialog-when-esc-key-is-pressed