自動清除 Phoenix LiveView 中的 Flash 訊息

Phoenix LiveView 是一種使用簡單堆疊創建 Web 應用程式的絕佳且優雅的方式。它的生成器功能非常強大，可以透過簡單的命令完成很多工作，但一直困擾我的一件事是閃現訊息不會在幾秒鐘後自行消失。

為了解決這個問題，我創建了一個簡單的鉤子，它會在 5 秒後淡出訊息，並從 LiveView 通道連接中清除 Flash 訊息。讓我們深入探討一下！

// 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-opacityuration-300）。

然後我們設定另一個超時，但這次是向伺服器發送事件（「lv:clear-flash」）以清除 flash 訊息。它會在隱藏訊息超時後幾毫秒觸發，以便為過渡效果提供足夠的時間來完成。

就是這樣！

以上是自動清除 Phoenix LiveView 中的 Flash 訊息的詳細內容。更多資訊請關注PHP中文網其他相關文章！