Как настроить клавиатуру на всей странице в Vue.js

Ответ 1

Короткий ответ - да, но как зависит от вашего контекста. Если вы используете vue-router, поскольку я нахожусь в текущем проекте, вам нужно добавить к внешнему элементу, который вы хотите применить. В моем случае я использую фактический начальный элемент элемента entry entry.vue.

Существует один улов, который, как мне кажется, является жестким требованием, элемент должен находиться внутри потенциально ориентируемых элементов. Способ, которым я занимаюсь этим, - установить -1 tabindex и просто объявить мои супер-горячие клавиши (в основном для целей отладки прямо сейчас) в родительском элементе в моем приложении.

<template>
  <div
    id="app-main"
    tabindex="-1"
    @keyup.enter="doSomething"
  >
    <everything-else></everything-else>
  </div>
</template>

EDIT:

В качестве дополнительной заметки я также добавил несколько дополнительных настроек для моего vue-router, чтобы убедиться, что правый элемент сфокусирован при переходе на страницы. Это позволяет прокручивать страницу /pagedown уже в нужном разделе на основе области содержимого, являющейся единственным прокручиваемым разделом. Вам также необходимо добавить tabindex = "- 1" к элементу app-content.

router.afterEach(function (transition) {
  document.getElementById('app-content').focus();
});

и базовый компонент моего приложения:

<template>
  <div id="app-content" tabindex="-1">
    <router-view
      id="app-view"
      transition="app-view__transition"
      transition-mode="out-in"
    ></router-view>
  </div>
</template>

Ответ 2

Возможно, лучший способ сделать это - с компонентом Vue. Это позволит вам контролировать, когда вы слушали события, включив или не включив компонент. Это также позволит вам подключить прослушиватели событий к Nuxt, используя компонент no-ssr.

Вот как вы создаете компонент:

<template>
  <div></div>
</template>

<script>
  export default {
    created() {
      const component = this;
      this.handler = function (e) {
        component.$emit('keyup', e);
      }
      window.addEventListener('keyup', this.handler);
    },
    beforeDestroy() {
      window.removeEventListener('keyup', this.handler);
    }
  }
</script>

<style lang="stylus" scoped>
  div {
    display: none;
  }
</style>

Затем на странице, которую вы хотите использовать, вы добавите этот HTML-код:

<keyboard-events v-on:keyup="keyboardEvent"></keyboard-events>

И тогда вам придется добавить метод обработчика событий:

methods: {
  keyboardEvent (e) {
    if (e.which === 13) {
      // run your code
    }
  }
}