vue.js - vue中添加键盘事件监听器

Question

我阅读了 vue 的文档，但无法弄清楚将键盘事件监听器添加到我的应用程序的正确方法是什么。它只是展示了如何为输入元素添加一个。我有类似的东西:

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

我想添加一个键盘事件监听器，以便当用户按下 ← 时它会向左移动，而 → 会向右移动。它适用于按钮事件监听器，但我不知道如何让它适用于键盘。

我应该执行 document.addEventListener() 还是 window.addEventListener()？我不需要整个应用程序的事件监听器，只需要那个 div。

Answer 1

它确实按预期工作。您只需确保您的按钮获得焦点。

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 在按钮之间切换焦点。