【Laravel實戰】5分鐘搞懂Livewire的離線狀態處理

有時候在使用者失去網路連線時提示他們是很重要的， Livewire 提供很有用的工具以便於離線狀態時進行某些行動

開啟或關閉元素 (Toggling elements)

你能夠在使用者處於離線狀態時顯示某個元素，透過加入 wire:offline 語句

<div wire:offline>
   離線中...
</div>

這個 <div> 預設將會自動被隱藏，只有在瀏覽器處於離線狀態時才會顯示

開啟或關閉樣式類別 (Toggling classes)

加入 class 修飾子能讓你在離線狀態時加入樣式類別到一個元素內

<div wire:offline.class="bg-red-300"></div>

現在，當瀏覽器處於離線狀態時，該元素將會收到 bg-redd-300 這個樣式類別，一旦恢復連線時該樣式類別就會被移除。如果想要做相反的操作，也就是移除樣式類別的話可以加入 .remove 這個修飾子，就跟 wire:loading 是相同的概念

<div wire:offline.class.remove="bg-green-300" class="bg-green-300"></div>

一旦離線時，bg-green-300 樣式類別將會被從 <div> 給移除

開啟或關閉屬性 (Toggling attributes)

加入 attr 修飾子能讓你在離線時加入一個屬性到元素內

<button wire:offline.attr="disabled">Submit</button>

現在，當瀏覽器離線時按鈕將會無效。你同樣可以進行相反的操作，也就是移除屬性，透過加入 .remove 修飾子