Обработчики событий нажатия и отмены клавиш в Vue 3

Недавно я слишком долго бился с функциональностью keyup и keydown в Vue. Я хотел обрабатывать клавиатурные события ctrl+period, и мне потребовалась целая вечность, чтобы найти ту часть документации, в которой рассматривался мой случай использования. Надеюсь, это руководство поможет вам сэкономить время!

Обратите внимание: это руководство предназначено для Vue 3! Если вы используете Vue 2, найдите другое руководство.

@keyup и @keydown

Некоторые сценарии нажатия клавиш по умолчанию довольно просты. Например, вы хотите зафиксировать, когда кто-то нажимает клавишу «ввод»? Вы можете сделать это:

<input @keyup.enter="onPressEnter" />

Войти в полноэкранный режим Выйти из полноэкранного режима

Или, возможно, вы хотите, чтобы событие срабатывало при нажатии клавиши, а не при ее отпускании:

<input @keydown.enter="onPressEnter" />
Войти в полноэкранный режим Выйти из полноэкранного режима

Помните, что событие onPressEnter должно быть определено и отображено в вашем шаблоне! Если вы используете API опций, это означает, что он должен быть определен как метод, а если вы используете setup(), это означает, что вы должны возвращать его из функции setup().

Какие ключи работают?

Согласно документации, для общих ключей предусмотрены псевдонимы:

  • .enter
  • .tab
  • .esc
  • .space
  • .up
  • .down
  • .right

Но что, если вы хотите захватить другой ключ? К сожалению, документация в основном обходит этот случай использования (по крайней мере, я не смог найти ни одного места, где бы он рассматривался).

Однако я нашел некоторую полезную информацию в руководстве по миграции Vue2 -> Vue3. Оказывается, можно использовать имя kebab-case для любой клавиши, которую вы хотите использовать в качестве модификатора. Например:

<input @keyup.a="onPressA" />
<input @keyup.page-down="onPressPageDown" />
Войти в полноэкранный режим Выйти из полноэкранного режима

Это работает даже для некоторых знаков препинания, таких как запятая:

<input @keyup.,="onPressComma" />
Ввести полноэкранный режим Выйти из полноэкранного режима

Теперь мы переходим к моей проблеме:

Что если я хочу захватить событие на клавише «точка»?

Следующий способ не работает:

<input @keyup..="onPressPeriod" />
Войти в полноэкранный режим Выйти из полноэкранного режима

Вместо этого нужно написать обработчик, который будет перехватывать все события нажатия/отпуска клавиш, и вручную следить за нужным свойством:

<input @keyup="onPress" />
Войти в полноэкранный режим Выход из полноэкранного режима
const onPress = (e) => {
  if (e.key !== ".") {
    // guard against non-period presses
    return;
  }
  onPressPeriod()
};
Вход в полноэкранный режим Выход из полноэкранного режима

Системные модификаторы

Тема «системных модификаторов» или «комбинаций клавиш» хорошо раскрыта в документации, поэтому я не буду тратить на нее много времени. Вам доступны четыре варианта:

  • .ctrl
  • .alt
  • .shift

Если вы хотите вызвать событие на ctrl+enter, вы можете просто подключить модификатор:

<input @keyup.ctrl.enter="onPressEnter" />
Войти в полноэкранный режим Выйти из полноэкранного режима

Модификаторы событий

<input @keyup.ctrl.stop="onPressCtrl" />
Вход в полноэкранный режим Выход из полноэкранного режима

Синтаксически, модификаторы событий также цепляются к ключевому слову @keyup. Ваши варианты включают:

.точный модификатор

Если вы хотите, чтобы обработчик срабатывал при нажатии именно тех клавиш, которые вы указали, используйте модификатор .exact.

<!-- this will fire even if alt or another key is also pressed -->
<button @keyup.ctrl="onPressCtrl">A</button>
Вход в полноэкранный режим Выход из полноэкранного режима
<!-- this will fire if ONLY ctrl is pressed -->
<input @keyup.ctrl.exact="onPressCtrl" />
Войти в полноэкранный режим Выход из полноэкранного режима

Модификаторы кнопок мыши, не дайте им обмануть вас

Сначала я подумал, что .left и .right относятся к клавишам со стрелками. На самом деле они относятся к кнопкам мыши. Все три следующих модификатора могут быть использованы для ограничения события тремя кнопками мыши.

  • .left
  • .right
  • .middle

Оцените статью
devanswers.ru
Добавить комментарий