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:
|
<<: 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
React implementiert dynamische Popup-Fensterkomponente
Wenn wir beim Schreiben einiger UI-Komponenten di...
MySQL 5.7.12 Installations- und Konfigurations-Tutorial unter Mac OS 10.11
So installieren und konfigurieren Sie MySQL auf M...
CSS-Vererbungsmethode
Gegeben sei ein Div mit folgendem Hintergrundbild...
Lösen Sie das Problem, dass die CentOS-Zeit der virtuellen VMWare-Maschine nicht mit der Ortszeit übereinstimmt
Die Zeit der virtuellen VM Ware-Maschine CentOS s...
3 verschiedene Möglichkeiten zum Löschen der Optionsoptionen im Auswahltag
Methode 1 Code kopieren Der Code lautet wie folgt:...
Einführung in die Verwendung von MySQL-Befehlen zum Erstellen, Löschen und Abfragen von Indizes
MySQL-Datenbanktabellen können Indizes erstellen,...
Detaillierte Erläuterung der Hinweise zum Flex- und Positionskompatibilitäts-Mining
Heute hatte ich etwas Freizeit, um eine Website f...
Mobile Web-Bildschirmanpassung (rem)
Vorwort Ich habe vor Kurzem meine bisherigen Noti...
Details zum JavaScript-Prototyp
Inhaltsverzeichnis 1. Übersicht 1.1 Was ist ein P...
Erfahren Sie, wie Sie saubere und standardmäßige HTML-Tags schreiben
Guter HTML-Code ist die Grundlage einer schönen W...
Detaillierte Erläuterung häufiger Xshell-Probleme und zugehöriger Konfigurationen
Dieser Artikel stellt häufige Probleme von Xshell...
Zusammenfassung gängiger Optimierungsvorgänge der MySQL-Datenbank (Erfahrungsaustausch)
Vorwort Bei einer datenzentrierten Anwendung wirk...
Implementierung der MySQL-Tabellenlöschoperation (Unterschiede zwischen Löschen, Abschneiden und Löschen)
In diesem Artikel werden hauptsächlich die Unters...
C# implementiert MySQL-Befehlszeilensicherung und -wiederherstellung
Es gibt viele Tools zum Sichern von MySQL-Datenba...
So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue
Inhaltsverzeichnis Einrichten einer einfachen HTT...