Модифікатори keyCode

несумісно

#

Огляд #

Ось короткий огляд того, що змінилося:

• НЕСУМІСНО: Використання чисел, тобто кодів клавіш як модифікаторів 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 вже втратив свою актуальність, Vue 3 більше не має сенсу продовжувати підтримувати його. Як наслідок, тепер рекомендується використовувати назву в стилі люля-кебаб для будь-якої клавіші, яку ви хочете використати як модифікатор.

<!-- Vue 3 Модифікатор клавіш на v-on -->
<input v-on:keyup.page-down="nextPage">

<!-- Підходить для q та Q -->
<input v-on:keypress.q="quit">

Як наслідок, це означає, що config.keyCodes тепер також застарілий і більше не підтримується.

Стратегія міграції #

Для тих, хто використовує keyCode у своїй кодовій базі, ми рекомендуємо перетворити їх на іменовані еквіваленти в стилі люля-кебаб.

Клавіші для деяких розділових знаків можна вказати буквально, наприклад, для клавіші ,:

<input v-on:keypress.,="commaPress">

Обмеження синтаксису не дозволяють перевірити певні символи, такі як ", ', /, =, > та . Для цих символів вам слід перевірити event.key всередині слухача.

Стяги збірки міграції:

• CONFIG_KEY_CODES
• V_ON_KEYCODE_MODIFIER