背景:
在一些搜尋框中,我們往往需要監聽鍵盤的按下(onkeydown)
或抬起(onkeyup)
事件以進行一些操作。在原生js
或者jquery
中,我們需要判斷e.keycode
的值來獲取使用者所按的鍵。這樣就存在乙個問題:我們必須知道某個按鍵的keycode
值才能完成匹配,使用起來十分不便。
方案:
在vue
中,已經為常用的按鍵設定了別名,這樣我們就無需再去匹配keycode
,直接使用別名就能監聽按鍵的事件。
另外,vue
中還支援組合寫法:
注意
但是,如果是在自己封裝的元件或者是使用一些第三方的ui
庫時,會發現並不起效果,這時就需要用到.native
修飾符了,如:
如果遇到v-model
="inputname"
placeholder
="搜尋你的檔案"
@keyup.enter.native
="searchfile(params)"
>
el-input
>
.native
修飾符也無效的情況,可能就需要用到$listeners
了,具體用法請參考vue
官方文件:將原生事件繫結到元件。
另外:
例://自定義鍵盤事件
vue.
directive
('on'
).keycodes.ctrl=
17;
lang
="en"
>
>
charset
="utf-8"
>
>
鍵盤事件title
>
自定義事件及其監聽 vue
當子元件需要和父級元件進行通訊,可以派發並監聽自定義事件。lang en charset utf 8 name viewport content width device width,initial scale 1.0 購物車title src vue.js script active style ...
自定義鍵盤事件
資料配合使用過濾器 limitby 限制幾個 limitby 引數 取幾個 limitby 取幾個從 開始 filterby 過濾資料 filterby 誰 orderby 排序 orderby 1 1 orderby 1 正序 orderby 1 倒序 自定義指令 vue.directive 指令...
Vue中監聽鍵盤事件
一,在vue中,已經為常用的按鍵設定了別名,這樣我們就無需再去匹配keycode,直接使用別名就能監聽按鍵的事件 keyup.enter function 屬性名 鍵值.delete delete 刪除 backspace 退格 tab tab.enter enter 回車 esc esc 退出 s...