Какие поддерживаются системные клавиши-модификаторы?vue-21

Vue.js поддерживает набор стандартных системных модификаторов клавиш, которые позволяют обрабатывать комбинации с клавишами Ctrl, Alt, Shift и другими. Эти модификаторы можно использовать с любыми событиями клавиатуры (keydown, keyup) и мыши (click, mousedown и др.).

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

1. Базовые модификаторы

<!-- Примеры использования в шаблоне -->
<input @keydown.ctrl="onCtrlPress">
<button @click.shift="onShiftClick">Shift+Click</button>

Поддерживаемые базовые модификаторы:

• .ctrl
• .alt
• .shift
• .meta (Cmd на Mac, Win на Windows)

2. Точные модификаторы

Позволяют требовать точное сочетание клавиш (без дополнительных модификаторов):

<input @keydown.ctrl.exact="onPureCtrl">
<button @click.shift.exact="onPureShiftClick">

3. Комбинации модификаторов

Можно комбинировать несколько модификаторов:

<textarea @keydown.ctrl.alt.delete="forceReset"></textarea>

Особые случаи и нюансы

1. Модификатор .meta
   Автоматически адаптируется под ОС:

   • MacOS: Command (⌘)
   • Windows: Windows key (⊞)

2. Модификатор .exact
   Полезен когда нужно обработать строго определенную комбинацию:

   <!-- Сработает только при нажатии именно A, без других модификаторов -->
   <input @keydown.a.exact="onPureA">
   

3. Модификаторы мыши
   Для событий мыши поддерживаются:

   • .left - левая кнопка
   • .right - правая кнопка
   • .middle - колесико мыши

   Пример:

   <div @mousedown.middle="onMiddleClick">Клик колесиком</div>
   

Практические примеры

Обработка "горячих клавиш"

<template>
  <div>
    <input @keydown.ctrl.s.prevent="saveDocument">
    <button @click.alt.enter="alternativeSubmit">Alt+Enter</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveDocument(e) {
      // .prevent предотвращает стандартное сохранение страницы браузером
      this.saveContent();
    },
    alternativeSubmit() {
      // Специальная обработка формы
    }
  }
}
</script>

Комбинации с клавишами-модификаторами

<!-- Ctrl + Shift + Click -->
<div @click.ctrl.shift="openAdvancedMenu"></div>

<!-- Alt + Space -->
<input @keyup.alt.space="toggleSpecialMode">

Поддержка модификаторов в пользовательских событиях

Модификаторы работают и с кастомными событиями:

this.$emit('custom-event.ctrl', payload);

<my-component @custom-event.ctrl="handleCtrlEvent"/>

Ограничения и особенности

1. Порядок модификаторов не имеет значения: .ctrl.alt === .alt.ctrl
2. Регистрозависимость: всегда используйте нижний регистр (.shift, не .Shift)
3. Мобильные устройства: некоторые комбинации могут работать иначе на тач-устройствах

Резюмируем:

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