Vue自定義按鍵修飾符

2021-10-01 18:08:52 字數 1496 閱讀 9580

在製作網頁的時候,常常會使用到各種鍵盤事件

例如keyup,當發生鍵盤抬起的事件時,會被觸發,那怎麼讓其只在特定的按鍵抬起時才觸發呢?

上個例子

"head"

>

@keydown

="mi"

>

>

}p>

div>

>

let vue1 =

newvue(,

methods:}}

);script

>

上面的例子中,給input繫結了鍵盤事件,當按下鍵盤時,就會觸發keydown事件,就會執行函式mi,彈出『ouyang』,

按下任意鍵

修改一下上面的**

"head"

>

@keydown.enter

="mi"

>

>

}p>

div>

在@keydown後加上.enter,意思就是只有在enter鍵按下的時候才會觸發這個事件

按下enter鍵後

之所以可以使用.enter的來代表回車鍵,是因為在vue中內建了一些全域性按鍵修飾符,實際上每個鍵都有個鍵碼,例如f2的鍵碼是113,

再來修改一下上面的**:

"head"

>

@keydown.113

="mi"

>

>

}p>

div>

把enter改為113,113代表的就是f2鍵,所以當f2鍵按下時才會觸發事件。

vue中內建的全域性按鍵修飾符有:

.enter .tab .delete (捕獲「刪除」和「退格」鍵) .esc .space .up .down .left .right

在vue中自定義全域性按鍵修飾符:

//f2就是修飾符,113就是鍵碼

vue.config.keycodes.f2 = 113;

自定義全域性按鍵修飾符後接著修改上面的**:

"head"

>

@keydown.f2

="mi"

>

>

}p>

div>

>

vue.config.keycodes.f2 =

113;

let vue1 =

newvue(,

methods:}}

);script

>

當按下f2鍵後就會彈出』ouyang『,如果把*vue.config.keycodes.f2 = 113;*刪除後再執行,按下f2鍵後不會有反應

Vue 按鍵修飾符

在監聽鍵盤事件時,我們經常需要檢查詳細的按鍵。vue 允許為v on在監聽鍵盤事件時新增按鍵修飾符 你可以直接將keyboardevent.key暴露的任意有效按鍵名轉換為 kebab case 來作為修飾符。在上述示例中,處理函式只會在 event.key等於pagedown時被呼叫。使用keyc...

python 自定義 修飾符

new 函式 在例項化開始之後,在呼叫 init 方法之前,python 首先呼叫 new 方法 單例1 class singleton1 object inst none 在例項化開始之後,在呼叫 init 方法之前,python 首先呼叫 new 方法 def new cls,args,kwar...

Vue筆記 2 事件修飾符 按鍵修飾符

修飾符 作用用來和事件連用,用來決定事件觸發條件或者是阻止事件的觸發機制 1.事件修飾符 stop修飾符 用來阻止事件冒泡 事件冒泡 詳情 prevent 事件修飾符 用來阻止標籤的預設行為 self 事件修飾符 用來針對於當前標籤的事件觸發 只觸發自己標籤的上特定動作的事件 只關心自己標籤上觸發的...