Vue implementiert eine Eingabekomponente, die den Tastenkombinationseffekt der Tastenanzeige erhält

Ich bin auf die Anforderung gestoßen, Tastenkombinationen auf der Seite anzupassen, was einen Ort zum Festlegen und Anzeigen von Tastenkombinationen erforderte. Ich habe mir die Element-Benutzeroberfläche angesehen und festgestellt, dass es keine Komponente gab, die mit geringfügigen Änderungen verwendet werden konnte, also habe ich selbst eine geschrieben.
Dies dient lediglich der Anzeige von Tastenkombinationen. Die tatsächliche Verknüpfung von Tastenkombinationen hängt von den zurückgegebenen Tastenkombinationsdaten ab und wird von einer anderen Komponente verarbeitet. Derzeit wurde nur die Chrome-Umgebung getestet.

Die Wirkung ist wie folgt:

Wichtige Punkte

Obwohl es wie eine Eingabe aussieht, zeigt es tatsächlich einen Beschriftungseffekt innerhalb der Komponente an und erfordert außerdem eine Löschschaltfläche. Hierzu muss der HTML-Code in das Eingabefeld eingefügt werden. Die Eingabekomponente des Browsers ist hierfür offensichtlich nicht geeignet, Sie können also nur die Wirkung einer Eingabekomponente selbst imitieren.

Fokus, Unschärfe, ausgewählte Hervorhebungseffekte

Nicht-Eingabekomponenten haben keine Effekte wie Fokus, Unschärfe und ausgewählte Hervorhebungseffekte. Glücklicherweise haben Browser Implementierungsmethoden reserviert, und Internetnutzer haben bereits online Lösungen bereitgestellt. Durch Hinzufügen des Attributs tabindex="0" zum Div kann das Div diese Effekte erzielen.

Das Attribut tabindex gibt die Reihenfolge der Tabulatortasten an. Wenn Sie 0 schreiben, werden die Komponenten in der Standardreihenfolge ausgewählt. Wenn Sie -1 schreiben, werden sie nie ausgewählt. Da es die Form einer Eingabekomponente hat, ist es sinnvoll, es über die Tabulatortaste abzurufen.

Fügen Sie dann CSS hinzu, um den Fokusrahmeneffekt zu erhalten, und bewegen Sie die Maus, um den Texttypzeiger anzuzeigen

.Tastenkombinationseingabe {
 Cursor: Text;
 Übergang: Rahmenfarbe 0,2 s Kubik-Bézier (0,645, 0,045, 0,355, 1);
}
.shortcut-key-input:fokus {
 Rahmenfarbe: #188cff;
 Kastenschatten: 0 0 4px rgba (24, 140, 255, 0,38);
}

Textaufforderungen

Wenn kein Inhalt vorhanden ist, muss dieser mit der Eingabe identisch sein, und standardmäßig kann eine Textaufforderung angezeigt werden. Dies fügt auch ein Div ein und steuert es mit Vue. Wenn die Ausgabelabelvariable Daten enthält, wird dieses Element nicht angezeigt.

Cursor-Blinkeffekt

Dies ist relativ einfach zu handhaben. Platzieren Sie ein Pseudoelement in der Input-Klasse, fügen Sie dieses Pseudoelement hinzu, wenn der Fokus erlangt wird, und geben Sie diesem Element dann eine CSS3-Animation, und Sie erhalten den Effekt eines blinkenden Cursors.

@keyframes Blinken {
 0 % { Deckkraft: 0; }
 100 % { Deckkraft: 1; }
}
.shortcut-key-input.cursor::nach {
 Inhalt: "|";
 Animation: Blinken 1,2 s Leichtigkeit 0 s unendlich;
 Schriftgröße: 18px;
 Position: absolut;
 oben: 1px;
 links: 8px;
}

Schlüsselerfassung

Die Tastenerfassung beruht hauptsächlich auf dem Keydown-Ereignis. Das zurückgegebene Ereignis markiert, ob Alt, Strg (Steuerung) und andere Informationen gedrückt wurden, sodass die Tastenkombination auf Grundlage dieser Informationen erreicht werden kann.
Da jeder Tastendruck ein Ereignis auslöst, müssen die Funktionstastenereignisse blockiert werden. Der Code implementiert nur eine Kombination aus nichtfunktionalen Tasten. Wenn eine Multifunktionstaste benötigt wird, können Sie eine weitere Variable erstellen, um die Situation des kontinuierlichen Tastendrucks zu beurteilen und dann zu verarbeiten.

  handleKeydown(e) {
   const { Alt-Taste, Strg-Taste, Umschalt-Taste, Taste, Code } = e;
   wenn (!CODE_CONTROL.includes(Schlüssel)) {
    wenn (!this.keyRange.includes(code)) return;
    lass controlKey = "";
    [
     { Taste: altKey, Text: "Alt" },
     { Taste: Strg-Taste, Text: "Strg" },
     { Taste: Umschalttaste, Text: "Umschalt" }
    ].fürJeden(aktuellerSchlüssel => {
     wenn (aktuellerSchlüssel.Schlüssel) {
      wenn (Steuertaste) Steuertaste += "+";
      Kontrolltaste += aktuelleTaste.text;
     }
    });
    if (Schlüssel) {
     wenn (Steuertaste) Steuertaste += "+";
     Kontrolltaste += Taste.toUpperCase();
    }
    this.addHotkey({ text: Steuertaste, Steuertaste: { alt-Taste, ctrl-Taste, Umschalttaste, Taste, Code } });
   }
   e.preventDefault();
  },

CODE_CONTROL ist ein weiterer voreingestellter Tastencodesatz zur einfachen Verarbeitung. Ursprünglich wurde keyCode verwendet, aber keyCode ist veraltet und Code wird empfohlen.
addHotkey ist eine der entsprechenden Variablen hinzugefügte Funktion, die hauptsächlich bestimmt, ob doppelte Tastenkombinationen vorhanden sind.
Anschließend wird eine externe Prüfschnittstelle reserviert, um festzustellen, ob bei mehreren Tastenkombinationen Duplikate vorhanden sind.
Es gibt auch eine Max-Schnittstelle, die die Anzahl der Tastenkombinationen für jede Komponente begrenzen kann.

  addHotkey(Daten) {
   wenn (diese.Liste.Länge und diese.Liste.einige(Element => Daten.Text === Element.Text)) zurückgeben;
   wenn (diese.Liste.Länge und diese.Liste.Länge.toString() === diese.max.toString()) zurückgeben;
   wenn (!this.verify(data)) return;
   diese.Liste.push(Daten);
  }

Online-Vorschau

https://codesandbox.io/s/vue-hotkeyinput-90m2k

Oben sind die Details der Implementierung einer Eingabekomponente durch Vue aufgeführt, die den Effekt einer Tastenkombination zur Anzeige erhält. Weitere Informationen zu den Tastenkombinationen zur Anzeige von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!