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

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


@keyup и @keydown

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

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

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

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

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

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

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

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


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

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

  • .enter
  • .tab
  • .delete (захватывает клавиши «Delete» и «Backspace»)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

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

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

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

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

Это работает даже для немного знаки препинания, такие как запятая:

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

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

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

Что делать, если я хочу зафиксировать событие на ключе точки?

Следующее делает нет Работа:

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

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

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

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

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

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

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


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

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

  • .ctrl
  • .alt
  • .shift
  • .meta (Клавиша «meta» — это «команда» на клавиатурах Apple и клавиша «windows» на клавиатурах Windows)

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

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

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


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

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

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

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

  • .stop — Остановить распространение события на другие обработчики
  • .prevent — Предотвратить обработку события по умолчанию (например, перезагрузку страницы для отправки формы)
  • .self — Только пожарные события для этого элемента, а не дочерние элементы
  • .capture — Обработайте событие здесь, прежде чем обрабатывать его на дочернем уровне.
  • .once — Инициировать это событие не более одного раза
  • .passive — Немедленно обработайте поведение по умолчанию, а также обработайте его здесь, не блокируя


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

Если вы хотите запустить свой обработчик, когда будут нажаты точные клавиши, которые вы указали, используйте .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 относится к клавишам со стрелками. На самом деле они относятся к кнопкам мыши. Все три следующих модификатора можно использовать для ограничения события тремя кнопками мыши.