Добавить слушателей событий клавиатуры в VUE

Question

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

<div>
  <p>Some content</p>
  <button>Go left</button>
  <button>Go right</button>
</div>

Я хочу добавить прослушиватель событий клавиатуры, чтобы, когда пользователь нажимает ←, он шел влево и → шел вправо.Это работает для слушателя событий кнопки, но я не знаю, как заставить это работать для клавиатуры.

Должен ли я сделать document.addEventListener() или window.addEventListener()?Мне не нужен прослушиватель событий для всего приложения, только для этого div.

Answer 1

См. JS Fiddle .

События клавиатуры работают только тогда, когда вы сфокусировались на этом элементе.Таким образом, фокусировка на целом <div> и наличие событий клавиатуры могут помочь.Это также устраняет необходимость использования этих двух кнопок слева направо.Такие элементы, как <button> и <a> обладают способностью фокусироваться, <div> - нет.Поэтому нам нужно вручную добавить индекс табуляции.

Подробнее об индексе табуляции можно узнать здесь .

Answer 2

Работает как положено.Вы просто должны убедиться, что ваша кнопка сфокусирована.

new Vue({
  el: "#app",
  methods: {
  	squack: function(text){
    	alert(text)
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
})

<div id="app">
<div>
  <p>Some content</p>
  <button @keyup.left="squack('left button clicked')" v-focus>Go left</button>
  <button @keyup.right="squack('right button clicked')">Go right</button>
</div>
</div>

См., Например, JSFiddle .Убедитесь, что вы перемещаете фокус между кнопками с помощью Tab / Shift + Tab.