Beispielcode zur Implementierung von Anti-Shake in Vue

Anti-Shake: Verhindert, dass wiederholte Klicks Ereignisse auslösen

Zunächst einmal: Was ist Zittern? Zittern ist ein Schauder! Ursprünglich habe ich einmal geklickt, jetzt habe ich dreimal geklickt! Ich frage mich, ob mein Freund ein gutes Gespür für Bilder im Kopf hat! Hahahahahaha

Eine typische Anwendung besteht darin, zu verhindern, dass Benutzer wiederholt klicken müssen, um Daten anzufordern.

Vue implementiert die Anti-Shake-Methode wie folgt:

1. Erstellen Sie zunächst einen neuen debounce.js-Code wie folgt

const Entprellung = Funktion (fn, Verzögerung) {
	let timer = null
	Rückgabefunktion(){
		lass Inhalt = dies;
		lass args = Argumente;
		wenn(Zeitgeber){
			Zeitüberschreitung löschen(Timer)
		}
		Timer = setzeTimeout(()=>{
			fn.apply(Inhalt,Argumente)
		}, Verzögerung)
	}
}
Standard-Entprellung exportieren

2. Führen Sie eine Entprellung in der Vue-Datei ein, die eine Verwacklungsminderung benötigt. Der Inhalt ist wie folgt: Dies ist eine 500-ms-Verwacklungsminderung eines Eingabefelds.

<Vorlage>
 <div Klasse="Haupt">
  <el-input v-model="input" @change="changeSeletc" placeholder="Bitte geben Sie Inhalt ein"></el-input>
 </div>
</Vorlage>
<Skript>
 Entprellung importieren aus "../utils/debounce"
 Standard exportieren {
  Name: "Alarm",
  Daten(){
   zurückkehren {
    Eingabe: ''
   }
  },
  Methoden:{
   changeSeletc:Entprellung(Funktion () {
    konsole.log(diese.eingabe)
   },500),
  }
 }
</Skript>
<Stilbereich>
</Stil>

3. Der Effekt ist wie unten dargestellt

Zusammenfassen

Dies ist das Ende dieses Artikels über die Anti-Shake-Implementierung von Vue. Weitere relevante Inhalte zu Vue Anti-Shake finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!