Vue.js / как сделать обработку горячих клавиш с учетом очередности показанных компонентов?

Question

[tenaro]

на проекте есть разные попапы, вылезающие поверх нотификации, выезжающие боковые панели итд, которые могут наслаиваться один на другой

надо по нажатию на esc закрывать их по одному, в зависимости от того, какой компонент считается активным в данный момент, по умолчанию - тот, который вылез на экран последним, или тот, где юзер что то делает (заполняет форму например)

подскажите подходящие библиотеки, которые учтут порядок отображаемых элементов

Comments

[Вадим]

ну библиотек на ум не приходит, но, мне кажется, это не сложно сделать и самому.
1. Заведите где-то в общей/глобальной области видимости стэк. (это может быть в сторе, в стороннем модуле, который будет импортироваться в компоненты и тд)
2. При открытии очередного компонента, который нужно закрывать по нажатию на esc - положите обработчик его закрытия в этот стэк.
3. Зарегистрируйте один общий обработчик для нажатия по esc, в котором Вы будете идти в стэк, извлекать сверху из него последний добавленный обработчик и вызывать его.

Итого:
Открылся попап1 => в стэке один обработчик
Открылся попап2 => в стэке два обработчика
Нажали на esc => извлекли из стэка обработчик2 и вызвали его. Попап2 закрылся. В стэке снова один обработчик.

P.s. стоит не забыть учесть момент размонтирования компонента - извлекать из стэка его обработчик закрытия. А так же, возможно, отчистку стэка при переходе на другой маршрут. Но это уже сами смотрите.

по умолчанию - тот, который вылез на экран последним, или тот, где юзер что то делает (заполняет форму например)

А если не для последовательности, а для активного компонента, то можно немного поменять подход.
Вместо стэка использовать обычный объект, в который ложить в качестве ключа - название компонента, а в качестве значения - обработчик его закрытия.
При фокусировке внутри компонента сохранять в переменную "последний активный компонент". По нажатию на esc идти в этот объект и по ключу "последний активный компонент" брать его обработчик и вызывать, после чего удалять из объекта это свойство.

[tenaro]

Вадим, как раз не хотелось все это с нуля реализовывать, т.к проект уже большой, и писать в каждом нужном компоненте обработчикки на добавление/удаление из стека казалось излишним
в итоге оказалось что есть "vue-shortkey", где стэк реализован из коробки, и надо только навешать события, остановился пока на этом варианте, хоть и есть нюансы
в любом случае спасибо что не прошли мимо и написали подробный ответ
не могу ометить решением ни ваш комментарий, ни свой, но удалять вопрос не хочу, пусть останется для других

[Вадим]

tenaro, Так я как раз не предлагал в каждом компонент писать обработчик на добавление. Я предложил написать модуль\плагин которым бы Вы пользовались в нужных компонентах.

Либу гляну, спасибо.