Automatisches Löschen von Flash-Meldungen in Phoenix LiveView

Phoenix LiveView ist eine fantastische und elegante Möglichkeit, Web-Apps mit einem einfachen Stack zu erstellen. Seine Generatoren sind super leistungsfähig und können mit einfachen Befehlen viel erledigen, aber eine Sache, die mich immer gestört hat, ist, dass Flash-Nachrichten nicht nach ein paar Sekunden von selbst verschwinden.

Um dieses Problem zu beheben, habe ich einen einfachen Hook erstellt, der die Nachricht nach 5 Sekunden ausblendet und außerdem die Flash-Nachricht aus der LiveView-Kanalverbindung löscht. Lasst uns eintauchen!

// app.js
let liveSocket = new LiveSocket("/live", Socket, {
  // ...
  hooks: {
    AutoClearFlash: {
      mounted() {
        let ignoredIDs = ["client-error", "server-error"];
        if (ignoredIDs.includes(this.el.id)) return;

        let hideElementAfter = 5000; // ms
        let clearFlashAfter = hideElementAfter + 500; // ms

        // first hide the element
        setTimeout(() => {
          this.el.style.opacity = 0;
        }, hideElementAfter);

        // then clear the flash
        setTimeout(() => {
          this.pushEvent("lv:clear-flash");
        }, clearFlashAfter);
      },
    },
  },
});

# core_components.ex
def flash(assigns) do
  # ...
  phx-hook="AutoClearFlash"
  {@rest}
  # ...
end

Da die Meldungen „Client-Fehler“ und „Server-Fehler“ wichtige Informationen über den Status und die Konnektivität der App anzeigen, ignoriere ich sie lieber.

Der erste Schritt besteht darin, ein Zeitlimit festzulegen, um die Deckkraft der Nachricht auf 0 zu ändern, sodass die Nachricht von der Benutzeroberfläche verschwindet. Kombinieren Sie dies mit Übergangseffekten für ein eleganteres Benutzererlebnis (in meinen Flash-Nachrichten verwende ich die folgenden Tailwind-Klassen: Transition-Opacity-Dauer-300).

Dann legen wir ein weiteres Timeout fest, dieses Mal jedoch, um ein Ereignis („lv:clear-flash“) an den Server zu senden, um die Flash-Nachricht zu löschen. Es wird einige Millisekunden nach dem Timeout zum Ausblenden der Nachricht ausgelöst, um dem Übergangseffekt genügend Zeit zum Abschluss zu geben.

Und das ist es!

Das obige ist der detaillierte Inhalt vonAutomatisches Löschen von Flash-Meldungen in Phoenix LiveView. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!