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 중국어 웹사이트의 기타 관련 기사를 참조하세요!