Zusammenfassung häufig verwendeter Toolfunktionen in Vue-Projekten

Vorwort

In diesem Artikel werden einige häufig verwendete Toolfunktionen in Vue-Projekten aufgeführt. Zur einheitlichen Verwaltung der Toolfunktionen werden diese Funktionen einheitlich im Ordner utils unter dem Verzeichnis src abgelegt.

1. Benutzerdefinierter Fokusbefehl

1. Methode 1

mouted-Zyklus, ref+querySelector holt das Eingabe-Tag und ruft focus() auf

2. Methode 2

Benutzerdefinierte Anweisungen (lokal) Anweisungen: fofo (eingefügt), definiert und verwendet im Tag, v-fofo

3. Methode 3

Globale benutzerdefinierte Anweisungen empfohlen (hohe Wiederverwendbarkeit). Importieren Sie es einfach in main.js und verwenden Sie es. Der Code lautet wie folgt (Beispiel):

Vue von „vue“ importieren

Vue.direktive("fofo",{
  eingefügt(el) {
    // Bestimme den Namen des erhaltenen Elements, wenn (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
      el.fokus()
  	} anders {
     // Versuchen Sie, die innere Ebene abzurufen el.querySelector('input').focus()
    }
  }
})

2. Eingabefeld Anti-Shake

1. Nachfrage

Wenn der Benutzer Inhalt in das Eingabefeld eingibt, muss das Eingabeereignis des Eingabefelds überwacht werden, um den vom Benutzer eingegebenen Inhalt abzurufen und an den Server zurückzugeben. Wenn sich jedoch der Wert des Eingabefelds ändert, wird sofort eine Ajax-Anforderung gesendet, was zu einigen unnötigen Ajax-Anforderungen führt. Wenn der Benutzer mit der Eingabe aufhört und eine bestimmte Zeit wartet, wird die Anforderung in den Hintergrund gesendet, wodurch einige unnötige Anforderungen reduziert werden können.

2. Ideen

Wenn der Benutzer mit dem Tippen beginnt, wird ein Timer gestartet. Wenn der Benutzer nach Ablauf des Timers keinen Inhalt mehr eingibt, wird eine Ajax-Anfrage an den Hintergrund gesendet. Wenn der Benutzer innerhalb der angegebenen Zeit erneut eine Eingabe macht, wird der vorherige Timer gelöscht und neu gestartet.

3. Code-Implementierung

Hier ist ein Beispiel, das zeigt, dass der Code extrahiert werden kann, nachdem das Implementierungsprinzip verstanden wurde. Der Code lautet wie folgt (Beispiel):

<Vorlage>
	<div>
        <Eingabetyp="Text" v-Modell="kw" @input="inputFn"/>
    </div>
</Vorlage>
<Skript>
Standard exportieren{
    Daten(){
        zurückkehren {
            kw:'',
            Timer: null
        }
    },
    Methoden:{
        EingabeFn(){
            Zeitüberschreitung löschen(dieser.Timer)
      		dieser.timer = setTimeout(() => {
                wenn(diese.kw === '') zurückgeben
                // Hier können Sie eine Ajax-Anfrage senden, um die vom Hintergrund zurückgegebene Suchassoziationsliste entsprechend den vom Benutzer eingegebenen Schlüsselwörtern abzurufen console.log(this.kw)
            }, 1000) // Wenn der Benutzer eine Sekunde lang aufhört, Inhalte einzugeben, wird die Logik im Timer ausgeführt. Wenn der Benutzer innerhalb einer Sekunde erneut Inhalte schreibt, wird der Timer neu gestartet. }
   	}
}
</Skript>

3. Hervorhebung von Schlüsselwörtern

1. Nachfrage

Wenn ein Benutzer im Eingabefeld nach einem Schlüsselwort sucht, ändert sich die Farbe des Schlüsselworts in der angezeigten Assoziationsliste, sodass der Benutzer die gewünschten Ergebnisse intuitiver sehen kann.

2. Ideen

Kapseln Sie eine lightFn-Funktion ein, die zwei Argumente empfängt, das erste ist die zu ändernde Zeichenfolge und das zweite ist das abzugleichende Schlüsselwort

3. Code-Demonstration

Der Code lautet wie folgt (Beispiel):

export const lightFn = (str, targetStr) => {
    // Groß-/Kleinschreibung ignorieren und global abgleichen const reg = new RegExp(targetStr, 'ig')
  return str.replace(reg, match => {
    gibt `<span style="color:red">${match}</span>` zurück
  })
}

IV. Formatieren Sie die in der Excel-Tabelle gespeicherte Zeit

1. Nachfrage

Konvertieren Sie die in der zu importierenden Excel-Tabelle gespeicherten Zeiten vom Excel-Format in das für die Speicherung verwendete Format.

2. Code-Demonstration

Dieser Code ist ein Zitat von Lan Yuxi. Dank diesem großen Kerl werde ich ihn hier sammeln ~ Der Code lautet wie folgt (Beispiel):

Exportfunktion formatExcelDate(Anzahl, Format = '/') {
  const Zeit = neues Datum((Zahl - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  Zeit.setYear(Zeit.getFullYear())
  const jahr = zeit.getFullYear() + ''
  const Monat = Zeit.getMonth() + 1 + ''
  const date = time.getDate() + ''
  wenn (Format && Format.Länge === 1) {
    Jahr + Format + Monat + Format + Datum zurückgeben
  }
  gibt Jahr + (Monat < 10 ? '0' + Monat : Monat) + (Datum < 10 ? '0' + Datum : Datum) zurück
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die häufig verwendeten Toolfunktionen in Vue-Projekten. Weitere relevante häufig verwendete Vue-Toolfunktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!