vue監聽鍵盤事件中的按鍵

2021-10-11 07:42:34 字數 801 閱讀 1678

在vue中,已經為常用的按鍵設定了別名,這樣我們就無需再去匹配keycode,直接使用別名就能監聽按鍵的事件。

別名

實際鍵值

.delete

delete(刪除)/backspace(退格)

.tab

tab.enter

enter(回車)

.esc

esc(退出)

.space

space(空格鍵)

.left

left(左箭頭)

.upup(上箭頭)

.right

right(右箭頭)

.down

down(下箭頭)

.ctrl

ctrl

.alt

alt.shift

shift

.meta

(window系統下是window鍵,mac下是command鍵)

另外,vue中還支援組合寫法:

組合寫法

按鍵組合

@keyup.alt.67=」function」

alt + c

@click.ctrl=」function」

ctrl + click

但是,如果是在自己封裝的元件或者是使用一些第三方的ui庫時,會發現並不起效果,這時就需要用到.native修飾符了,如:

如果遇到.native修飾符也無效的情況,可能就需要用到$listeners了,具體用法請參考vue官方文件:將原生事件繫結到元件.

Vue如何監聽鍵盤事件中的按鍵

在我們的專案經常需要監聽一些鍵盤事件來觸發程式的執行,而vue中允許在監聽的時候新增關鍵修飾符 submit 對於一些常用鍵,還提供了按鍵別名 submit 縮寫形式 全部的按鍵別名 enter tab delete 捕獲 刪除 和 退格 鍵 esc space up.down left right...

Vue中監聽鍵盤事件

一,在vue中,已經為常用的按鍵設定了別名,這樣我們就無需再去匹配keycode,直接使用別名就能監聽按鍵的事件 keyup.enter function 屬性名 鍵值.delete delete 刪除 backspace 退格 tab tab.enter enter 回車 esc esc 退出 s...

vue監聽組建鍵盤事件

表單提交時需要處理輸入框的回車事件,一般的原生input標籤可以用 keyup.enter onsubmit tips onsubmit為定義的方法 但是在組建裡就不好用,需要多加乙個native,如下 keyup.enter onsubmit 改寫為 keyup.enter.native onsu...