Vue.js / как сделать обработку горячих клавиш с учетом очередности показанных компонентов?
на проекте есть разные попапы, вылезающие поверх нотификации, выезжающие боковые панели итд, которые могут наслаиваться один на другой
надо по нажатию на esc закрывать их по одному, в зависимости от того, какой компонент считается активным в данный момент, по умолчанию - тот, который вылез на экран последним, или тот, где юзер что то делает (заполняет форму например)
подскажите подходящие библиотеки, которые учтут порядок отображаемых элементов
ну библиотек на ум не приходит, но, мне кажется, это не сложно сделать и самому.
1. Заведите где-то в общей/глобальной области видимости стэк. (это может быть в сторе, в стороннем модуле, который будет импортироваться в компоненты и тд)
2. При открытии очередного компонента, который нужно закрывать по нажатию на esc - положите обработчик его закрытия в этот стэк.
3. Зарегистрируйте один общий обработчик для нажатия по esc, в котором Вы будете идти в стэк, извлекать сверху из него последний добавленный обработчик и вызывать его.
Итого:
Открылся попап1 => в стэке один обработчик
Открылся попап2 => в стэке два обработчика
Нажали на esc => извлекли из стэка обработчик2 и вызвали его. Попап2 закрылся. В стэке снова один обработчик.
P.s. стоит не забыть учесть момент размонтирования компонента - извлекать из стэка его обработчик закрытия. А так же, возможно, отчистку стэка при переходе на другой маршрут. Но это уже сами смотрите.
по умолчанию - тот, который вылез на экран последним, или тот, где юзер что то делает (заполняет форму например)
А если не для последовательности, а для активного компонента, то можно немного поменять подход.
Вместо стэка использовать обычный объект, в который ложить в качестве ключа - название компонента, а в качестве значения - обработчик его закрытия.
При фокусировке внутри компонента сохранять в переменную "последний активный компонент". По нажатию на esc идти в этот объект и по ключу "последний активный компонент" брать его обработчик и вызывать, после чего удалять из объекта это свойство.
Вадим, как раз не хотелось все это с нуля реализовывать, т.к проект уже большой, и писать в каждом нужном компоненте обработчикки на добавление/удаление из стека казалось излишним
в итоге оказалось что есть "vue-shortkey", где стэк реализован из коробки, и надо только навешать события, остановился пока на этом варианте, хоть и есть нюансы
в любом случае спасибо что не прошли мимо и написали подробный ответ
не могу ометить решением ни ваш комментарий, ни свой, но удалять вопрос не хочу, пусть останется для других
tenaro, Так я как раз не предлагал в каждом компонент писать обработчик на добавление. Я предложил написать модуль\плагин которым бы Вы пользовались в нужных компонентах.
