Effacement automatique des messages flash dans Phoenix LiveView

Phoenix LiveView est un moyen génial et élégant de créer des applications Web avec une simple pile. Ses générateurs sont super performants et peuvent faire beaucoup de choses avec des commandes simples, mais une chose qui m'a toujours dérangé est que les messages flash ne disparaissent pas d'eux-mêmes après quelques secondes.

Pour résoudre ce problème, j'ai créé un crochet simple qui fait disparaître le message après 5 secondes et efface également le message flash de la connexion du canal LiveView. Plongeons-y !

// 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

Étant donné que les messages « erreur client » et « erreur serveur » affichent des informations importantes sur l'état et la connectivité de l'application, je préfère les ignorer.

La première étape consiste à définir un délai d'attente pour changer l'opacité du message à 0, faisant ainsi disparaître le message de l'interface utilisateur. Combinez cela avec des effets de transition pour une expérience utilisateur plus élégante (dans mes messages flash, j'utilise les classes Tailwind suivantes : transition-opacity duration-300).

Ensuite, nous définissons un autre timeout, mais cette fois pour envoyer un événement ("lv:clear-flash") au serveur afin d'effacer le message flash. Il est déclenché quelques millisecondes après le délai d'expiration du message masqué afin de donner à l'effet de transition suffisamment de temps pour se terminer.

Et c'est tout !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!