Как закрыть модальное окно по Esc?

Question

[Николай Чуприк]

Есть шаблон модального окна:

template: '\
	<div class = "alert"
		<button id = "x-button" @click="close">\	//  По клику на кнопке работает: модальное окно закрывается
		@keypress.enter = "close"\			//  А вот с клавиатуры закрытие не работает
		@keypress.esc = "close">\
		<slot>...</slot>\
	</div>\
';

Как сделать закрытие окно по нажатию Esc или Enter? Наверное надо не так обработчики вещать. А как правильно?

Comments

[Сергей delphinpro]

Угловая скобка!

[Николай Чуприк]

Сергей delphinpro, спасибо за внимательность. Нет, не в этом дело. Это опечатка в посте, но не в программе.

Answer 1

[Evgeny Kulakov]

Добавьте листенеры в компонент, и делайте в них обработку:

mounted() {
        window.addEventListener('keyup', this.keyup)
    },
destroyed() {
        window.removeEventListener('keyup', this.keyup)
    }

Answer 2

[Nikita Dergachov]

template: '\
	<div class = "alert" 
                @keypress.enter = "close"\
		@keypress.esc = "close">\

		<button id = "x-button" @click="close">\

		<slot>...</slot>\
	</div>\
';