vue 어떤 상황이든 esc키 누르면 다이얼로그 닫히게 하는 방법을 알고 싶습니다.

Question

이러한 형태의 dialog가 있습니다. esc키를 누르면 dialog가 닫히도록 코드를 작성하였는데,특정 상황에서 esc 키를 눌러도 dialog가 닫히지 않는 현상을 발견했습니다. (dialog 내부에 있는 모든 요소들) 와 같이 작성하였고 esc 누르면 잘 닫힙니다. 하지만 해당 상황에서 동작하지 않는 문제가 발생합니다.[에러사항]v-list-item 아이템 항목을 클릭v-button 클릭해당 2가지 이후에 현재 focus를 출력하면 로 잡히는 문제점 때문에 v-dialog에 버블링 효과로 keydown.esc가 닫질 않는 것으로 파악이 됩니다. 이 경우에는 어떻게 처리하면 좋을까요?v-dialog 내부에 있는 어떤 요소를 클릭 하더라도 포커스가 v-dialog 내부로 잡혀서 esc를 눌렀을 때 eventListener가 v-dialog에 도달하면 문제가 해결될 것 같은데 어떻게 해야 할지 알고싶습니다

Clickin · Answer

global event를 사용할 수도 있겠지만 왠만하면 상태관리 라이브러리 쓰시고 boolean으로 팝업여부를 관리하시는 게 좋습니다.pinia나 vuex 등 전역 상태관리가 가능한 라이브러리를 사용하시면 됩니다.

vue 어떤 상황이든 esc키 누르면 다이얼로그 닫히게 하는 방법을 알고 싶습니다.

1개의 답변

기술 목록