Прослушивание ключевого события "esc" на компоненте div в Vue.js

Я хочу прослушать событие ключа esc, чтобы вызвать метод в компоненте Vue. Документы показывают этот пример:

<input v-on:keyup.enter="submit">

но я использую <div></div>, и вам нужно поймать событие извне. Однако я не хочу перегружать глобальные обработчики или что-то в этом роде.

Любые предложения?

Ответ 1

Для тех, кто блуждает здесь из Google, в Vue 2...

<div @keydown.esc="something_in_your_methods"></div>

Ответ 2

Вы не можете. Основные события отправляются из тега body, а Vue не может быть подключен к тегу <body>.

]

Вам нужно будет настроить свой собственный прослушиватель событий.

(источник изображения и дополнительная информация на Когда VueJS не может помочь вам)

Ответ 3

Что я сделал, так это пошел на миксин.

Миксин в файле с именем close.js

export default {
    created() {
        let that = this;

        document.addEventListener('keyup', function (evt) {
            if (evt.keyCode === 27) {
                that.close();
            }
        });
    },
};

Импортируйте и используйте его в нужном компоненте

import closeMixin from './../../mixins/close.js';

export default {
    mixins: [closeMixin],
    props: [],
    computed: {}
    methods: {
        close(){
            // closing logic
        }
    }
}

Ответ 4

Секрет для создания keydown события работают на дивы и других не форматируемых элементов, чтобы добавить tabindex атрибут:

<div tabindex="0"
    @keydown.left="previousImage"
    @keydown.right="nextImage" />

Теперь div стал фокусируемым элементом, и ключевые события будут вызваны.

Вот больше информации о фокусируемых элементах и tabindex