Что такое модификаторы клавиш?vue-19

Модификаторы клавиш (key modifiers) в Vue.js — это специальные директивы, которые позволяют обрабатывать события клавиатуры с дополнительными условиями. Они используются преимущественно с директивами v-on (или @) для обработки нажатий конкретных клавиш или комбинаций клавиш.

Основные типы модификаторов клавиш

1. Базовые модификаторы
   Позволяют отслеживать нажатие конкретных клавиш по их коду или имени:

   <template>
     <input @keyup.enter="submitForm" />
     <input @keydown.space="playPause" />
   </template>
   

   Здесь:

   • .enter срабатывает при нажатии клавиши Enter
   • .space реагирует на пробел

2. Модификаторы системных клавиш
   Обрабатывают комбинации с Ctrl, Alt, Shift и Meta (Cmd на Mac):

   <button @click.ctrl="saveDraft">Сохранить черновик (Ctrl+Click)</button>
   

3. Кастомные модификаторы
   Можно использовать коды клавиш через .keyCode (хотя это устаревший подход):

   <input @keyup.13="submit" /> <!-- 13 - код Enter -->
   

4. Цепочки модификаторов
   Позволяют комбинировать условия:

   <input @keydown.ctrl.enter="forceSubmit" />
   

Практическое применение

Пример обработки сложной комбинации:

<template>
  <div>
    <textarea
      @keydown.ctrl.83.prevent="saveDocument"
      @keyup.esc="closeModal"
    ></textarea>
  </div>
</template>

<script>
export default {
  methods: {
    saveDocument(e) {
      // .prevent отменит стандартное действие сохранения страницы
      this.saveToDB();
    },
    closeModal() {
      this.showModal = false;
    }
  }
}
</script>

Особенности работы

1. Автоматическое определение раскладки
   Vue нормализует модификаторы типа .shift, .ctrl независимо от раскладки клавиатуры.

2. Экзотические клавиши
   Поддерживаются даже редкие клавиши:

   <input @keyup.caps-lock="onCapsLock" />
   

3. Модификаторы мыши
   Аналогично работают для mouse-событий:

   <div @click.middle="middleClick">Нажми колесиком</div>
   

Best Practices

• Используйте .prevent, .stop для управления поведением событий
• Для частых операций (сохранение, отмена) оптимальны комбинации с Ctrl/Command
• Избегайте конфликтов с системными горячими клавишами браузера

Резюмируем:

модификаторы клавиш в Vue — это мощный инструмент для создания интерактивных интерфейсов с детализированной обработкой пользовательского ввода, который значительно упрощает работу с клавиатурными событиями.