MyTetra Share
Делитесь знаниями!
Модификатороы клавиш при обработке событий в Vue
28.01.2018
13:13
Автор: br0ke
Текстовые метки: javascript, js, vue.js, vuejs, vue, v-on, keyup, onkeyup, keydown, onkeydown, keypress, onkeypress, modifiers, enter, tab, delete, esc, space, up, down, left, right, exact
Раздел: Информационные технологии - JavaScript - Vue

Для события @click поддерживаются клавишные модификаторы, которые ограничат действие события только определенными клавишами. Можно использовать несколько.


Использовать код клавиши:

<!-- вызвать `vm.submit()` только если `keyCode` равен 13 -->
<input v-on:keyup.13="submit">


Использовать псевдонимы для наиболее распространенных клавиш:

<!-- аналогично примеру выше -->
<input v-on:keyup.enter="submit">

<!-- сразу несколько клавиш -->
<input v-on:keyup.enter.space.tab="submit">


<!-- Ctrl+Enter -->
<input v-on:keyup.ctrl.enter="submit">


<!-- работает также и в сокращённой записи -->
<input @keyup.enter="submit">


<!-- ctrl, shift, alt, meta работают и с событиями мыши -->

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Сделать что-нибудь</div>


Список псевдонимов:

  • .enter
  • .tab
  • .delete (ловит как “Delete”, так и “Backspace”)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

  • Клавиши-модификаторы (работают и с событиями клавиатуры, и с событиями мыши):

  • .ctrl
  • .alt
  • .shift
  • .meta

  • Модификаторы клавиш мыши:

  • .left
  • .right
  • .middle


Можно определить пользовательские псевдонимы клавиш через глобальный объект config.keyCodes:

// позволит использовать `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112



Модификатор .exact позволяет контролировать точную комбинацию системных модификаторов:

<!-- это сработает даже если Alt или Shift также нажаты -->
<button @click.ctrl="onClick">A</button>

<!-- это сработает только когда нажат Ctrl и не нажаты никакие другие клавиши -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- это сработает только когда не нажаты никакие системные модификаторы -->
<button @click.exact="onClick">A</button>



Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования