自动清除 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中文网其他相关文章！