Vue-Praxis zur Vermeidung mehrfacher Klicks

Vue-Praxis zur Vermeidung mehrfacher Klicks

Im Allgemeinen werden Klickereignisse in verschiedene Situationen für Nachrichtenerinnerungen unterteilt. Wenn sie nicht behandelt werden, werden in nur wenigen Sekunden viele Eingabeaufforderungsnachrichten angezeigt, was sehr ärgerlich sein wird, zum Beispiel:

Wie kann ich steuern, dass diese Eingabeaufforderung nur einmal angezeigt wird?

Fügen Sie dann vorne die Click-Event-Methode hinzu

Definieren Sie die Variable hasRemind, um zu steuern, ob die entsprechende Operation im Klickereignis ausgeführt werden soll

Wenn der Benutzer zum ersten Mal klickt, ist hasRemind = false. Zu diesem Zeitpunkt wird die zweite if-Anweisung eingegeben und der Wert von hasRemind wird auf true geändert. Nach 3 Sekunden wird der Wert von hasRemind erneut auf false geändert. In diesem Fall kann der Benutzer alle Prozesse im Klickereignis normal eingeben.

Wenn der Benutzer zum zweiten Mal klickt, ist hasRemind = true und das Klickereignis wird direkt beendet. Die Reihe von Prozessen in der Klickmethode kann nur fortgesetzt werden, wenn der Wert von hasRemind false ist.

//Standardmäßig hat das Klickereignis, das die Anmeldung auslösen kann, Remind:false,
//Mehrere aufeinanderfolgende Klicks verhindern let vm = this;
wenn(this.hasRemind === true) zurückgeben;
wenn (this.hasRemind === false) {
    dies.hasRemind = wahr;
    setzeTimeout(Funktion(){
       vm.hasRemind = falsch;
    },3000)
}

(Hier wird der obige Codeausschnitt in das Klickereignis bei der Anmeldung eingefügt, um zu verhindern, dass der Benutzer mehrmals darauf klickt und dadurch mehrere Eingabeaufforderungsmeldungen angezeigt werden.)

 // „Persönliches Login-Klick-Ereignis“
            registerBtn() {
                //Mehrere aufeinanderfolgende Klicks verhindern let vm = this;
                wenn(this.hasRemind === true) zurückgeben;
                wenn (this.hasRemind === false) {
                    dies.hasRemind = wahr;
                    setzeTimeout(Funktion(){
                        vm.hasRemind = falsch;
                    },3000)
                }
                var qs = Qs;
                wenn (dieser.logintype == 1) {
                    //Konto und Passwort anmelden if (this.username == "") {
                        diese.$nachricht({
                            Meldung: 'Bitte geben Sie Ihre Kontonummer ein',
                            Typ: "Warnung"
                        });
                        gibt false zurück;
                    }
                    sonst wenn (dieses.Passwort == "") {
                        diese.$nachricht({
                            Meldung: 'Bitte geben Sie Ihr Passwort ein',
                            Typ: "Warnung"
                        });
                        gibt false zurück;
                    } anders {
                        request_POST('/login', qs.stringify({
                            Identität: dieser.Benutzername,
                            desStr: dieses.Passwort,
                            Anmeldetyp: 1,
                            Anmelderolle: 0
                        })).then((res) => {
                            wenn (res.data.code == 200) {
                                localStorage.setItem("Token", res.data.data["JEECMS-Auth-Token"]);
                                //Anmeldung erfolgreich// window.open(this.apiHost + 'uesr/resume', '_parent')
                                Fenster.öffnen(this.apiHost + 'index/index', '_parent')
                            } sonst wenn (res.data.code == 12462) {
                                diese.$nachricht({
                                    Meldung: 'Benutzer nicht registriert',
                                    Typ: "Warnung"
                                });
                                // Zur Registrierungsseite springen setTimeout(() => {
                                    Fenster.öffnen(this.apiHost + 'userregister/userregister',
                                        '_selbst');
                                }, 1000)
                            } else if (res.data.code == 12468) { //Benutzer hat keinen Benutzernamen und kein Passwort localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/enterAccount', '_parent');
                            } else if (res.data.code == 604) { //Benutzer hat keinen Lebenslauf localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1077) { //Der Lebenslauf hat die Prüfung nicht bestanden localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/fillresume', '_parent');
                            } sonst wenn (res.data.code == 1075) { //Prüfung wird fortgesetzt localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/audit', '_parent');
                            } anders {
                                dies.$message.error(res.data.message);
                            }
                        })
                    }
                } anders {
                    //Bestätigungscode loginif (this.phone == "") {
                        diese.$nachricht({
                            Nachricht: 'Bitte geben Sie Ihre Telefonnummer ein',
                            Typ: "Warnung"
                        });
                        gibt false zurück;
                    } sonst wenn (!(/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(
                            dieses.telefon))) {
                        diese.$nachricht({
                            Meldung: „Bitte geben Sie eine gültige Telefonnummer ein“,
                            Typ: "Warnung"
                        });
                        gibt false zurück;
                    } sonst wenn (dieser.code == "") {
                        diese.$nachricht({
                            Meldung: „Bitte geben Sie den Bestätigungscode ein“,
                            Typ: "Warnung"
                        });
                        gibt false zurück;
                    } anders {
                        request_POST('/login', qs.stringify({
                            Identität: dieses.Telefon,
                            Captcha: dieser Code,
                            Anmeldetyp: 2,
                            Anmelderolle: 0
                        })).then((res) => {
                            wenn (res.data.code == 200) {
                                localStorage.setItem("Token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/resume', '_parent');
                            } sonst wenn (res.data.code == 12462) {
                                diese.$nachricht({
                                    Meldung: 'Benutzer nicht registriert',
                                    Typ: "Warnung"
                                });
                                // Zur Registrierungsseite springen setTimeout(() => {
                                    Fenster.öffnen(this.apiHost + 'userregister/userregister',
                                        '_selbst');
                                }, 1000)
                            } else if (res.data.code == 12468) { //Benutzer hat keinen Benutzernamen und kein Passwort localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/enterAccount', '_parent');
                            } else if (res.data.code == 604) { //Benutzer hat keinen Lebenslauf localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1077) { //Der Lebenslauf hat die Prüfung nicht bestanden localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/fillresume', '_parent');
                            } sonst wenn (res.data.code == 1075) { //Prüfung wird fortgesetzt localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                Fenster.öffnen(this.apiHost + 'uesr/audit', '_parent');
                            } anders {
                                dies.$message.error(res.data.message);
                            }
                        })
                    }
                }
            },

Dies ist das Ende dieses Artikels über die Vorgehensweise zum Verhindern von Mehrfachklicks in Vue. Weitere relevante Inhalte zum Verhindern von Mehrfachklicks in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Vue verhindert das Auslösen mehrerer Anfragen nach aufeinanderfolgenden Klicks in einem kurzen Zeitraum
  • Detaillierte Erläuterung der Idee zur Implementierung einer Berechtigungssteuerung auf Schaltflächenebene basierend auf benutzerdefinierten Vue-Anweisungen
  • Lösen Sie das Problem der wiederholten Datenübertragung, wenn Sie mehrmals auf die Vue-Schaltfläche klicken.
  • Vue-Direktive verhindert das Parsen von Schaltflächenklicks

<<:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27

>>:  Grafisches Tutorial zur Installation und Konfiguration von Win32 MySQL 5.7.27

Artikel empfehlen

Detaillierte Erläuterung des Anwendungsbeispiels für den JQuery-Tag-Selektor

In diesem Artikelbeispiel wird der spezifische Co...

Lernbeispiel für den Nginx Reverse Proxy

Inhaltsverzeichnis 1. Reverse-Proxy-Vorbereitung ...

Reines HTML+CSS, um einen Tippeffekt zu erzielen

In diesem Artikel wird hauptsächlich der durch re...

Vue implementiert Bildverifizierungscode beim Anmelden

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte grafische Erläuterung der MySql5.7.18-Zeichensatzkonfiguration

Hintergrund: Vor langer Zeit (2017.6.5, der Artik...

Objektorientierte Programmierung mit XHTML und CSS

<br />Wenn XHTML und CSS nur objektorientier...

So sortieren Sie eine Zeile oder Spalte in MySQL

Verfahren: Nach Beschreibung: Beides kann nicht e...