要在 Vue.js 抓取鍵盤事件，我們可以使用其 Key Modifiers 來抓到，然後利用像這樣的方式來抓

@keyboardEvent.key="event"

比如我有一個 input：

<input type="text" @keyup.down="doSomething">

就可以在離開「下」的鍵盤時觸發事件。

可以用的 modifier 有這些：

  • .enter
  • .tab
  • .delete (captures both "Delete" and "Backspace" keys)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift

可是如果在 div 上就沒辦法直接觸發，這時候就要在上面加上 tabindex='0' 的屬性，才能夠抓到 keyboard 事件，像是：

<div 
        @keydown.up="toUp"
        @keydown.down="toDown" 
        @keydown.left="toLeft"
        @keydown.right="toRight" 
        tabindex="0">
...
        </div>

給有需要的參考。