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 サイトの他の関連記事を参照してください。