在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...