In einem Artikel erfahren Sie, wie Sie mehrere DIVs und Schaltflächenbindungs-Eingabeereignisse in VUE implementieren

Aktuell besteht die Anforderung, dass beim Klicken auf den OK-Button oder Drücken der Tastatur-Eingabetaste eine Aktion ausgeführt wird, was an vielen Stellen nötig ist.

Ich habe mehrere Methoden ausprobiert, aber keine davon hat funktioniert.

Zuerst habe ich die Methode @keyup.enter an das Div (ebenfalls an die Schaltfläche) gebunden, aber das hatte überhaupt keine Wirkung. Dann habe ich die Methode im Internet befolgt und sie folgendermaßen geschrieben:

<div class="btn submit" @keyup.enter="submit" @click="submit">Bestätigen (Eingabe)</div>

erstellt(){
   Dokument.onkeydown = Funktion(e) {
     wenn(e.keyCode == 13){
       console.log("Rufen Sie die Methode auf, die ausgeführt werden muss"); 
     }
   }
 },

Damit lässt sich zwar das Carriage Return-Event implementieren, allerdings ist es global, d.h. wenn man in anderen Komponenten die Enter-Taste drückt, wird hier auch das Carriage Return-Event aufgerufen. Diese Methode funktioniert nicht.

Dann habe ich Folgendes gemacht:

1. Fügen Sie zwischen der Schaltfläche „OK“ und der Schaltfläche „Abbrechen“ ein <input>-Tag hinzu (wenn Sie es in der Mitte platzieren, kann dies als Abstandshalter zwischen den Schaltflächen dienen, sodass „margin-left“ nicht geschrieben werden muss) und fügen Sie dann das Ereignis „@keyup.enter“ zu diesem Eingabetag hinzu.

<template slot="Fußzeile">
        <div Klasse="dialog-footer dis-flex">
          <div class="btn cancel" @click="showDialog = false">Abbrechen (Esc)</div>
          <Eingabe
            Typ="Text"
            ref="Eingabedaten"
            Klasse="hiddenIpt"
            @keyup.enter="Senden"
          />
          <div class="btn senden" @click="senden">
            Bestätigen (Ent)
          </div>
        </div>
</Vorlage>

2. Schreiben Sie einen Listener, um das Eingabefeld automatisch zu fokussieren, wenn das Popup-Fenster geöffnet wird (Eingabedaten werden mit Ref an die Eingabe gebunden).

betrachten:
    zeigeDialog() {
      wenn (dieser.showDialog) {
        //this.$refs.inputdata.focus(); Falsche Art, dies zu schreiben.$nextTick(() => {//Richtige Art, dies zu schreiben.$refs.inputdata.focus();
        });
      }
    },
  },

3. Blenden Sie das Eingabefeld aus (legen Sie die Breite fest, die als Abstand zwischen den Schaltflächen „OK“ und „Abbrechen“ verwendet werden soll).

.hiddenIpt {
    Breite: 2rem;
    Deckkraft: 0;
  }

Dies ist die perfekte Lösung. Wenn Sie eine bessere Lösung haben, können Sie sich gerne an uns wenden.

Zusammenfassen

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