vue的監聽鍵盤事件的快捷方法

在我們的項目經常需要監聽一些鍵盤事件來觸發程式的執行，而Vue中允許在監聽的時候添加關鍵修飾符：

<input v-on:keyup.13="submit">

對於一些常用鍵，還提供了按鍵別名：

<input @keyup.enter="submit">      <!-- 縮寫形式 -->

全部的按鍵別名：

•  .enter
•  .tab
•  .delete (捕獲“刪除”和“退格”鍵)
•  .esc
•  .space
•  .up
•  .down
•  .left
•  .right

修飾鍵：

•  .ctrl
•  .alt
•  .shift
•  .meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

與按鍵別名不同的是，修飾鍵和 keyup 事件一起用時，事件引發時必須按下正常的按鍵。換一種說法：如果要引發 keyup.ctrl，必須按下 ctrl 時釋放其他的按鍵；單單釋放 ctrl 不會引發事件。

<!-- 按下Alt + 釋放C觸發 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 釋放任意鍵觸發 -->
<input @keyup.alt="other">

<!-- 按下Ctrl + enter時觸發 -->
<input @keydown.ctrl.13="submit">

 對於elementUI的input，我們需要在後面加上.native, 因為elementUI對input進行了封裝，原生的事件不起作用。

<input v-model="form.name" placeholder="昵稱" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="昵稱" @keyup.enter.native="submit"></el-input>