Phoenix LiveView 中实现自动关闭 Flash 消息的技术方案

在 Phoenix LiveView 项目中，开发者经常需要使用 Flash 消息来向用户展示操作反馈。标准的 put_flash 函数提供了基本的消息展示功能，但默认情况下这些消息需要用户手动点击关闭按钮才能消失。本文将详细介绍如何为 Flash 消息添加自动关闭功能，提升用户体验。

Flash 消息的基本使用

Phoenix LiveView 通过 put_flash/3 函数来设置 Flash 消息：

put_flash(socket, :info, "操作成功!")

这种基本用法会在页面上显示一个消息框，但需要用户主动点击关闭按钮才能移除消息。对于许多场景来说，自动消失的消息体验会更好。

实现自动关闭的技术方案

LiveView 提供了 lv:clear-flash 事件，我们可以利用这个特性结合客户端 JavaScript 来实现自动关闭功能。

1. 修改 Flash 组件

首先需要在 Flash 组件中添加一个定时器属性：

def flash(assigns) do
  ~H"""
  <div class="flash-message" phx-click="lv:clear-flash" phx-value-key={@key}>
    <%= @message %>
  </div>
  """
end

2. 添加客户端 Hook

创建一个 JavaScript Hook 来处理自动关闭逻辑：

const FlashHook = {
  mounted() {
    const duration = this.el.dataset.duration || 3000
    setTimeout(() => {
      this.pushEvent("lv:clear-flash", {key: this.el.dataset.key})
    }, duration)
  }
}

3. 注册 Hook

在应用初始化时注册这个 Hook：

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: {Flash: FlashHook}
})

高级配置选项

自定义消失时间

可以通过在组件上添加 data-duration 属性来指定不同的消失时间：

<div class="flash-message" data-duration="5000" phx-click="lv:clear-flash" phx-value-key={@key}>
  <%= @message %>
</div>

不同类型的消息配置不同时间

可以根据消息类型设置不同的消失时间：

const duration = {
  'info': 3000,
  'error': 5000
}[this.el.dataset.type] || 3000

样式优化建议

为了更好的用户体验，建议为即将消失的消息添加动画效果：

.flash-message {
  transition: opacity 0.5s ease-out;
}

.flash-message.fading {
  opacity: 0;
}

然后在 Hook 中提前触发淡出动画：

setTimeout(() => {
  this.el.classList.add('fading')
  setTimeout(() => {
    this.pushEvent("lv:clear-flash", {key: this.el.dataset.key})
  }, 500)
}, duration - 500)

总结

通过结合 LiveView 的事件系统和简单的客户端 JavaScript，我们可以轻松实现 Flash 消息的自动关闭功能。这种方案既保持了 LiveView 的响应式特性，又提供了更好的用户体验。开发者可以根据实际需求调整消失时间和动画效果，打造更加精致的用户界面。