Почему на Vue.js @ keydown.alt работает, а @ keyup.alt - нет? - PullRequest
Новая
       10

Почему на Vue.js @ keydown.alt работает, а @ keyup.alt - нет?

0 голосов
/ 03 февраля 2019

У меня есть переменная, которую я хочу установить в 1, когда нажата клавиша alt, и в 0, когда нет, но в результате Vue выполняет только @ keydown.alt.

Я пытался свведите ключ, и он отлично работает, переключаясь между двумя состояниями, но я не могу понять, почему это не с помощью клавиши Alt. 

    @keydown.alt="scheda++"
    @keyup.alt="scheda--"

1 Ответ

0 голосов
/ 03 февраля 2019

Из документации Vuejs :

Обратите внимание, что клавиши-модификаторы отличаются от обычных клавиш, и при использовании с событиями нажатия клавиш их нужно нажимать, когда событие генерируется.Другими словами, keyup.ctrl будет срабатывать только в том случае, если вы отпустите клавишу, удерживая нажатой клавишу Ctrl.Он не сработает, если вы отпустите клавишу Ctrl в одиночку.Если вам действительно нужно такое поведение, используйте вместо него keyCode для ctrl: keyup.17

Но для Alt есть еще одна проблема, если вы используете Windows.В системах Windows, окно интерпретирует нажатие Alt как желание открыть меню окна, и keyup больше не вызывается.Мы хотим предотвратить поведение по умолчанию и можем сделать это с помощью event.preventDefault() или, в мире Vue, модификатора события .prevent . 

new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
  	increment: function() {
    	console.log('inc')
    	this.counter += 1;
    },
    decrement: function() {
    	console.log('dec')
    	this.counter -= 1;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input @keydown.18.prevent="increment()" @keyup.18.prevent="decrement()">
  <p >{{ counter }}</p>
</div>
...