Membersihkan mesej kilat secara automatik dalam Phoenix LiveView

Phoenix LiveView ialah cara yang hebat dan elegan untuk mencipta apl web dengan timbunan mudah. Penjananya sangat berkebolehan dan boleh melakukan banyak perkara dengan arahan mudah, tetapi satu perkara yang selalu mengganggu saya ialah mesej kilat tidak hilang dengan sendirinya selepas beberapa saat.

Untuk menangani perkara ini, saya mencipta cangkuk mudah yang memudarkan mesej selepas 5 saat dan juga mengosongkan mesej kilat daripada sambungan saluran LiveView. Mari kita mendalaminya!

// 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

Memandangkan mesej "ralat-klien" dan "ralat-pelayan" memaparkan maklumat penting tentang status dan ketersambungan apl, saya lebih suka mengabaikannya.

Langkah pertama ialah menetapkan tamat masa untuk menukar kelegapan mesej kepada 0, menjadikan mesej hilang daripada UI. Gabungkan itu dengan kesan peralihan untuk pengalaman pengguna yang lebih elegan (dalam mesej kilat saya, saya menggunakan kelas Tailwind berikut: transition-opacity duration-300).

Kemudian kami menetapkan tamat masa lain, tetapi kali ini untuk menghantar acara ("lv:clear-flash") ke pelayan untuk mengosongkan mesej kilat. Ia dicetuskan beberapa milisaat selepas tamat masa menyembunyikan mesej untuk memberikan kesan peralihan masa yang cukup untuk diselesaikan.

Dan itu sahaja!

Atas ialah kandungan terperinci Membersihkan mesej kilat secara automatik dalam Phoenix LiveView. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!