vue 鍵盤事件的應用
阿新 • • 發佈:2019-01-10
在原生js或者jQuery中,我們需要判斷e.keyCode
的值來獲取使用者所按的鍵。這樣就存在一個問題:我們必須知道某個按鍵的keyCode
值才能完成匹配,使用起來十分不便。
keyCode | 實際鍵值 |
48到57 | 0到9 |
65到90 | a到z(A到Z) |
112到135 | F1到F24 |
8 | BackSpace(退格) |
9 | Tab |
13 | Enter(回車) |
20 | Caps_Lock(大寫鎖定) |
32 | Space(空格鍵) |
37 | Left(左箭頭) |
38 | Up(上箭頭) |
39 | Right(右箭頭) |
40 | Down(下箭頭) |
在Vue中,已經為常用的按鍵設定了別名,這樣我們就無需再去匹配keyCode
,直接使用別名就能監聽按鍵的事件。
原生元件使用鍵盤事件
<input @keyup.enter="submit"> |
鍵盤 別名
別名 | 實際鍵值 |
.delete | delete(刪除)/BackSpace(退格) |
.tab | Tab |
.enter | Enter(回車) |
.esc | Esc(退出) |
.space | Space(空格鍵) |
.left | Left(左箭頭) |
.up | Up(上箭頭) |
.right | Right(右箭頭) |
.down | Down(下箭頭) |
.ctrl | Ctrl |
.alt | Alt |
.shift | Shift |
.meta | (window系統下是window鍵,mac下是command鍵) |
注意
如果是在自己封裝的元件或者是使用一些第三方的UI庫時,會發現並不起效果,這時就需要用到.native
修飾符了,如:
<el-input style="width: 420px;text-align:center;padding-left: 36px" type="password"
v-model="loginForm.password"
placeholder="密碼"
@keyup.enter.native="login"></el-input>
如果遇到.native
修飾符也無效的情況,可能就需要用到$listeners
了,具體用法請參考Vue官方文件:將原生事件繫結到元件。