Detaillierte Erklärung der Tastaturereignisse von Vue

Wenn wir in js den Code einer Taste abrufen möchten, müssen wir normalerweise ein Ereignis über (Taste gedrückt/Taste hoch) binden und dann den Code über das keyCode-Attribut im Standardparameterereignis abrufen. Wenn wir zum Auslösen eines Ereignisses eine feste Taste drücken möchten, müssen wir im Ereignis ständig Urteile fällen, was sehr mühsam ist.

 var Eingabe = document.querySelector('Eingabe')
    input.onkeyup = Funktion (e) {
        wenn (e.keyCode == 13)
            console.log('Ich bin die Eingabetaste')
    }

In Vue werden Aliase für einige häufig verwendete Schaltflächen bereitgestellt, und wir müssen nur nach dem Ereignis den entsprechenden Alias ​​hinzufügen, ohne das Ereignis manuell beurteilen zu müssen.

Allgemeine Schlüsselaliase

Vue hat einigen häufig verwendeten Schaltflächen Aliase zugewiesen. Diese lauten wie folgt.

• Pfeil nach oben: nach oben
• Pfeil nach unten: nach unten
• Linker Pfeil: links
• Rechter Pfeil: rechts
• Raum: Raum
• Zeilenumbruch: Tab
• Beenden: esc
• Eingeben: eingeben
• Entf/Rücktaste:Entf

Mit Aliasnamen können Tastaturereignisse (Taste gedrückt, Taste los) eingeschränkt werden. Das gebundene Ereignis wird nur ausgeführt, wenn die gedrückte Taste mit dem Alias ​​übereinstimmt.

 <input v-on:keyup.enter="showtip" type="text">
Die Methode showtip wird nur ausgeführt, wenn die Eingabetaste gedrückt wird

Darüber hinaus ist die Tabulatortaste nur für die Verwendung mit „keydown“ geeignet. Im Browser ist die Tabulatortaste selbst an ein Ereignis gebunden: Fokus wechseln, sodass nach dem Drücken und Loslassen der Tabulatortaste das Standardereignis ausgelöst wird und das an „keyup“ gebundene Ereignis ignoriert wird. Durch die Verwendung von „keydown“ kann diese Situation vermieden werden, und das gebundene Ereignis wird in dem Moment ausgeführt, in dem die Tabulatortaste gedrückt wird.

Schlüssel ohne Alias ​​angegeben

Darüber hinaus gibt es in Vue keinen Alias ​​für die Schaltfläche. Vue bietet uns auch eine Möglichkeit, sie zu verwenden. Vue legt fest, dass Sie für Schaltflächen, die keinen Alias ​​bereitstellen, den ursprünglichen Schlüsselwert der Schaltfläche zum Binden verwenden können. Der sogenannte Schlüsselwert ist der von event.key erhaltene Wert. wie

 var Eingabe = document.querySelector('Eingabe')
    input.onkeyup = Funktion (e) {
       Konsole.log(e.key)
       }

Der obige Code gibt den entsprechenden Tastenwert in der Konsole aus, wenn wir eine beliebige Taste drücken. Durch Drücken der Groß- und Kleinbuchstaben-Umschalttaste sowie der Tasten Q und W erhalten Sie die folgenden Werte

Wir können den Schlüsselwert als Alias ​​für den Schlüssel verwenden. Es ist zu beachten, dass Sie den Schlüsselwert direkt verwenden können, wenn der Schlüsselwert ein einzelner Buchstabe oder ein einzelnes Wort ist. Wenn er jedoch aus mehreren Wörtern besteht, wie z. B. der Groß- und Kleinschreibungsschalter, handelt es sich um eine Kombination aus zwei Wörtern. Zu diesem Zeitpunkt müssen Sie den Schlüsselwert ändern und die Bindestrich-Benennungsregel verwenden, um CapsLock-->Capslock zu ändern.

 <input v-on:keyup.Q="showtip" type="text">
//Die Showtip-Methode wird nur ausgeführt, wenn die Taste q gedrückt wird <input v-on:keyup.caps-lock="showtips" type="text">
//Die Methode showtips wird nur ausgeführt, wenn die Feststelltaste gedrückt wird

Systemmodifizierertasten

Die sogenannten Systemmodifizierertasten sind Strg, Alt, Umschalt usw. Die Verwendung dieser Tasten ist etwas kompliziert und kann hauptsächlich in die folgenden zwei Situationen unterteilt werden

1. Wenn das Auslöseereignis eine Taste gedrückt ist, müssen Sie andere Tasten drücken, während Sie die Modifikatortaste gedrückt halten, und dann die anderen Tasten loslassen, damit das Ereignis ausgelöst wird.

 <input v-on:keyup.Alt="showtips" type="text">
//Drücken Sie die Alt-Taste und dann eine beliebige Taste. Lassen Sie dann eine beliebige Taste los, um die Showtips-Methode auszuführen. //Die obigen Schritte sind zu mühsam. Wir können es so schreiben: <input v-on:keyup.Alt.y="showtips" type="text">
//Wenn Sie Alt Y drücken, wird das Ereignis ausgelöst, ohne dass Sie Alt, dann Y und dann Y drücken müssen.

Wenn das Auslöserereignis ein gedrückter Schlüssel ist, drücken Sie direkt die Sondertaste.

 <input v-on:keydown.Alt="showtips" type="text">
//Die Methode showtips wird nur ausgeführt, wenn die Alt-Taste gedrückt wird

Benutzerdefinierte Schlüsselaliase

Vue bietet uns eine Methode zum Anpassen von Schlüsselaliasen, die wie folgt definiert werden können: (Vue.config.keyCodes.custom Schlüsselname = Schlüsselcode)

 <input v-on:keydown.en="showtips" type="text">
//Die Methode showtips wird nur ausgeführt, wenn die Eingabetaste gedrückt wird Vue.config.keyCodes.en=13
//13 ist der Tastencode der Eingabetaste, definieren Sie ihren Alias ​​als en

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!