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

前端雜貨發表於2018-07-11
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>

 

相關文章