Wie kann ich mehrere Tasten drücken (auf/ab) auf Vue.js

Question

Ich versuche, gemeinsame Chat-App auf Vue.js zu implementieren.

window.onload = function() { 
 
    new Vue({ 
 
    el: '#vue-chat', 
 
    data: { 
 
     body: '' 
 
    }, 
 
    methods: { 
 
     fooMethod: function() { 
 
     alert('foo'); 
 
     }, 
 
     barMethod: function() { 
 
     alert('bar'); 
 
     } 
 
    } 
 
    }) 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.3/vue.js"></script> 
 
<div id="vue-chat"> 
 
    <ul class="comments"> 
 
    <li></li> 
 
    </ul> 
 

 
    <input type="text" v-model="body" @keyup.enter="fooMethod"> 
 
</div>

und ich will barMethod rufen, wenn Benutzer-Taste eingeben und Taste gleichzeitig verschieben.

Ich habe Dokumente gelesen, aber ich konnte den Weg nicht finden. Vielen Dank für das Lesen!

Answer 1

Mit der Shift-Taste und andere Zusatztasten Sie sehen können, wenn sie durch das event Objekt gedrückt wurden.

Ich würde eine einzige Methode mit @keyup.enter verwenden und dann entscheiden, welche Methode auf der Grundlage der shiftKey Wert aufrufen.

new Vue({ 
    el: '#app', 
    data: { 
    message: 'Hi', 
    }, 
    methods: { 
    action(event) { 
     if (event.shiftKey) { 
     this.shiftKeyPressed() 
     } else { 
     this.shiftKeyNotPressed() 
     } 
    }, 
    shiftKeyPressed() { 
     console.log('Shift key was pressed.') 
    }, 
    shiftKeyNotPressed() { 
     console.log('Shift key was NOT pressed.') 
    }, 
    } 
}) 

Hier ist eine kurze Demo: https://jsfiddle.net/bj75cyd3/

Answer 2

Es gibt keinen einfachen Weg, um zu tun, was Sie wollen.

Sie können Ihr Ziel nicht durch Modifikatoren erreichen; Sie müssen den Modifikator .enter fallen lassen und sich mit dem Ereignis keyup sowie dem Ereignis keydown befassen.

<input type="text" v-model="body" @keyup="keyUp" @keydown="keyDown"> 

Es gibt eine short answer und ein long answer was darauf hindeutet, wie in JavaScript, um mehrere Tasten gedrückt zu verfolgen.

Basierend auf den Antworten oben verlinkten, können wir die Basis unserer Vue Lösung bauen:

data: { 
    shiftPressed: false 
}, 
methods: { 
    keyDown: function (event) { 
     if (event.keyCode === 16) { 
      this.shiftPressed = true 
     } 
    }, 
    keyUp: function(event) { 
     if (event.keyCode === 16) { 
      this.shiftPressed = false 
     } 
     if (this.shiftPressed && (event.keyCode === 13)) { 
      this.shiftPressed = false // avoid double trigger 
      this.fooMethod() 
     } 
    } 
}