Phoenix LiveView에서 플래시 메시지 자동 삭제

Phoenix LiveView는 간단한 스택으로 웹 앱을 만드는 멋지고 우아한 방법입니다. 생성기는 매우 강력하며 간단한 명령으로 많은 작업을 수행할 수 있지만, 항상 저를 괴롭히는 한 가지는 플래시 메시지가 몇 초 후에도 저절로 사라지지 않는다는 것입니다.

이 문제를 해결하기 위해 저는 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에서 사라지도록 하는 것입니다. 보다 우아한 사용자 경험을 위해 이를 전환 효과와 결합합니다(내 플래시 메시지에서는 다음 Tailwind 클래스를 사용합니다: 전환 불투명도 기간-300).

그런 다음 또 다른 시간 제한을 설정했지만 이번에는 플래시 메시지를 지우기 위해 서버에 이벤트("lv:clear-flash")를 보냅니다. 전환 효과를 완료하는 데 충분한 시간을 제공하기 위해 메시지 숨기기 시간 초과 후 몇 밀리초 후에 트리거됩니다.

그리고 그게 다입니다!

위 내용은 Phoenix LiveView에서 플래시 메시지 자동 삭제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!