【Laravel實戰】15分鐘搞懂 Livewire組件的載入狀態

因為 Livewire 會在每次頁面觸發了一個行動時就會開始一段造訪伺服器的旅程，有時候我們的伺服器未必能夠及時的回應使用者的事件，像是點擊。這時候 Livewire 能協助你輕易地顯示載入狀態用以提示使用者，讓使用者有更好的互動體驗

載入狀態開關機制

載入狀態時開關元素(Toggling elements during "loading" states)

加了 wire:loading 語句的元素只有在當頁面處於等待行動，也就是網路請求的狀態下才會顯示

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading>
        Processing Payment...
    </div>
</div>

當 "Checkout" 按鈕被按下，一段 "付款進行中..."的訊息將會出現。當請求完成之後，這段訊息就會消失。假如你希望避免因為載入時間過短導致出現的訊息快閃的狀況，你能夠加入 .delay 修飾子。這樣的話只有在載入時間長於200微秒的狀況下才會顯示這段訊息

<div wire:loading.delay>...</div>

預設情況下， Livewire 會將載入提示元素的 "display" CSS 屬性設為 "inline-block"。假如你希望 Livewire 改成使用 "flex" 或 "grid" 的話，你能夠使用下面的修飾子

<div wire:loading.flex>...</div>
<div wire:loading.grid>...</div>
<div wire:loading.inline>...</div>
<div wire:loading.table>...</div>

你也能夠在載入狀態下隱藏某個元素，透過為之加入 .remove 修飾子

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading.remove>
        Hide Me While Loading...
    </div>
</div>

載入狀態時開關類別 (Toggling classes)

你也能夠在載入狀態時加入或移除元素的樣式類別，透過加入 .class 修飾子到 wire:loading 語法後面

<div>
    <button wire:click="checkout" wire:loading.class="bg-gray">
        Checkout
    </button>
</div>

現在，當 "Checkout" 按鈕被按下時，網路請求正在進行之時，背景將會轉為灰色

不只如此，你也能夠執行相反的操作，也就是移除樣式類別，做法就是加入 .remove 修飾子

<div>
    <button wire:click="checkout" wire:loading.class.remove="bg-blue" class="bg-blue">
        Checkout
    </button>
</div>

現在 bg-blue 樣式類別將會在按下按鈕進行載入之時被移除

開啟或關閉屬性 (Toggling attributes)

與樣式類別類似， 元素的 HTML 屬性也能夠在載入狀態時開啟或關閉

<div>
    <button wire:click="checkout" wire:loading.attr="disabled">
        Checkout
    </button>
</div>

現在，當 "Checkout" 按鈕被按下， disabled="true" 的這個屬性將會在載入狀態時被加到元素上

針對特定對象

針對特定行動(Targeting specific actions)

如果是較為複雜的組件，你可能會想要只有在特定的行動時才出現載入提示器

<div>
    <button wire:click="checkout">Checkout</button>
    <button wire:click="cancel">Cancel</button>

    <div wire:loading wire:target="checkout">
        Processing Payment...
    </div>
</div>

在上面的例子中，載入提示器將會在 "Checkout" 按鈕被點下時才會出現，按下 "Cancel" 按鈕時是不會出現的

wire:target 能夠透過逗號分隔的方式來傳入多個參數，像這樣 wire:target="foo, bar"，這讓你能夠針對多個特定行動。甚至你還能夠指定帶特定參數的行動

<div>
    <button wire:click="update('bob')">Update</button>

    <div wire:loading wire:target="update('bob')">
        Updating Bob...
    </div>
</div>

針對模型 (Targeting models)

除了行動，你也能夠指定當一個 wire:model 被同步的狀況

<div>
    <input wire:model="quantity">

    <div wire:loading wire:target="quantity">
        Updating quantity...
    </div>
</div>