Vue中監聽鍵盤事件及自定義鍵盤事件

背景：

在一些搜尋框中，我們往往需要監聽鍵盤的按下(onkeydown)或抬起(onkeyup)事件以進行一些操作。在原生js或者jquery中，我們需要判斷e.keycode的值來獲取使用者所按的鍵。這樣就存在乙個問題：我們必須知道某個按鍵的keycode值才能完成匹配，使用起來十分不便。

方案：

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

另外，vue中還支援組合寫法：

注意

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

v-model

="inputname"
placeholder
="搜尋你的檔案"
@keyup.enter.native
="searchfile(params)"
>
el-input
>

另外：

//自定義鍵盤事件

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