Vue 3.0 按鍵修飾符

#概覽

以下是變更的簡要總結：

• 非兼容：不再支持使用數(shù)字 (即鍵碼) 作為 v-on 修飾符
• 非兼容：不再支持 config.keyCodes

#2.x 語法

在 Vue 2 中，支持 keyCodes 作為修改 v-on 方法的方法。

<!-- 鍵碼版本 -->
<input v-on:keyup.13="submit" />
<!-- 別名版本 -->
<input v-on:keyup.enter="submit" />

此外，你可以通過全局 config.keyCodes 選項。

Vue.config.keyCodes = {
  f1: 112
}

<!-- 鍵碼版本 -->
<input v-on:keyup.112="showHelpText" />
<!-- 自定別名版本 -->
<input v-on:keyup.f1="showHelpText" />

#3.x 語法

從KeyboardEvent.keyCode has been deprecated 開始，Vue 3 繼續(xù)支持這一點就不再有意義了。因此，現(xiàn)在建議對任何要用作修飾符的鍵使用 kebab-cased (短橫線) 大小寫名稱。

<!-- Vue 3 在 v-on 上使用 按鍵修飾符 -->
<input v-on:keyup.delete="confirmDelete" />

因此，這意味著 config.keyCodes 現(xiàn)在也已棄用，不再受支持。

#遷移策略

對于那些在代碼庫中使用 keyCode 的用戶，我們建議將它們轉換為它們的 kebab-cased (短橫線) 命名對齊。