0

не понимаю как отловить событие нажатия клавиши во vue-sli, без использования фреймворка с этим проблем нет, без него я могу сделать так:

document.addEventListener('keydown', function(event) {
    if (event.code == 'Escape') {
        alert('Нажата клавиша Escape');
    }
});

Но как это сделать во vue? В документации предлагают создать input и обрабатывать события через него, но дизайн моего проекта не предусматривает использования input, а если я вешаю событие нажатия клавиши на какой-либо элемент кроме input, то оно не работает, например:

<template>
  <div>
    <header @keydown="key">Какой-то текст...</header>
  </div>
</template>

<script>
  export default {
    methods: {
      key() {
        alert('Клавиша нажата')
      }
    }
  }
</script>

Так же я пробовал вешать событие не на элемент, а отслеживать его в теге script, например:

<template>
    <div>
        Какой-то текст
    </div>
</template>

<script>
    export default {
        data() {
            keyDown: false 
        }
    }

    document.addEventListener('keydown', function(event) {
        if (event.code == 'Escape') {
            alert('Нажата клавиша Escape');
            // Как изменить переменную keyDown?
        }
    });
</script>

Но после того как событие произошло, мне нужно изменить изменить переменную в data, но я не могу этого сделать, потому что я не понимаю, что я должен сделать, чтобы получить её вне export, нигде не нашёл информации по этому поводу, везде отслеживают нажатие клавиши с помощью input

3 ответа 3

0

Вот только что проверил. У меня есть некий компонент. Предположим, что я не хочу слушать событие вне этого компонента. Сейчас я привожу код одного из компонентов, в котором повесил на document слушателя на хук mounted(). Потом, когда я закрываю своё окошко (которое и есть этот компонент), я хочу убрать слушателя. Для этого в beforeDestroy() хуке я этого слушетеля удаляю. Вот полный кусок кода как есть. Просто копипаст. Всё работает:

<script>
import AuthProviderSelector from './AuthProvider_Selector.vue';
import AuthProviderList from './AuthProvider_List.vue';

import scroll from '@/utils/scrollLock.js';

function listener() { // слушатель
    console.log('pressed');
}

export default {
    mounted() {
        scroll.lock();
        document.addEventListener('keydown', listener); // здесь я его регистрирую
    },
    computed: {
        currentProviderTab() {
            return this.$store.state.UiState.authProviderCurrentTab;
        }
    },
    components: {
        AuthProviderSelector,
        AuthProviderList,
    },
    beforeDestroy() {
        document.removeEventListener('keydown', listener); // здесь я его удаляю.
    },
    destroyed() {
        scroll.unlock();
    }
}
</script>
1
  • Благодарю, сейчас нет доступа к компьютеру, попробую попозже
    – Inventor
    3 мар 2020 в 6:41
0

Да, это работает, но как мне изменить переменную, находящуюся в data? Например у меня есть такой код:

<template>
    <div>
        <header v-if="langRu">Заголовок</header>
        <header v-else>Head</header>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                langRu: true
            }
        },
        mounted() {
            document.addEventListener('keydown', function(e) {
                if (e.code == 'Escape') {
                    // Это не работает
                    langRu = !langRu
                }
            });
        }
    }
</script>

Например я хочу, чтобы при нажатии клавиши Escape у меня менялся язык и изменялась переменная langRu, но как это сделать? Я не могу просто внутри функции взять и присвоить ей что-то, в документации ничего не нашёл, там предлагают обрабатывать нажатие клавиши следующим образом:

<input type="text" @keydown="func">

Но как я уже говорил, мне не подходит вариант с использованием input

0

Сам разобрался, изменяю данные в data следующим образом:

<script>
export default {
    data() {
        return {
            enLang = true
        }
    },
    mounted() {
        var obj_data = this // При изменении obj_data.enLang изменяется так же enLang в data
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.