ホームページ  >  記事  >  ウェブフロントエンド  >  Phoenix LiveView のフラッシュ メッセージを自動的にクリアする

Phoenix LiveView のフラッシュ メッセージを自動的にクリアする

Susan Sarandon
Susan Sarandonオリジナル
2024-10-29 22:49:29499ブラウズ

Automatically clearing flash messages in Phoenix LiveView

Phoenix LiveView は、シンプルなスタックで Web アプリを作成するための素晴らしくエレガントな方法です。そのジェネレーターは非常に高性能で、簡単なコマンドで多くのことを実行できますが、私がいつも気になっているのは、フラッシュ メッセージが数秒経っても自然に消えないことです。

これに対処するために、5 秒後にメッセージをフェードアウトし、LiveView チャネル接続からフラッシュ メッセージをクリアする簡単なフックを作成しました。それでは、詳しく見ていきましょう!

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

「クライアント エラー」および「サーバー エラー」メッセージには、アプリのステータスと接続に関する重要な情報が表示されるため、無視することをお勧めします。

最初のステップは、タイムアウトを設定してメッセージの不透明度を 0 に変更し、メッセージが UI から消えるようにすることです。これをトランジション効果と組み合わせて、よりエレガントなユーザー エクスペリエンスを実現します (Flash メッセージでは、次の Tailwind クラスを使用しています:transition-opacityduration-300)。

次に、別のタイムアウトを設定しますが、今回はフラッシュ メッセージをクリアするためにサーバーにイベント (「lv:clear-flash」) を送信します。トランジション効果が完了するのに十分な時間を与えるために、非表示メッセージのタイムアウトから数ミリ秒後にトリガーされます。

以上です!

以上がPhoenix LiveView のフラッシュ メッセージを自動的にクリアするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。