iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 12

Day 12 | 元件狀態:讀取 Loading States

在 Livewire 上的操作都會透過 AJAX 將資料往返與前後端之間,有些較長的請求可能不會即時反映在頁面上,像是上傳檔案...等等。因次為了給使用者更好的體驗與避免重送請求,就可以透過這個功能在頁面有請求讀取時能夠將讀取顯示在頁面上。

官方文件
DEMO頁面

基礎使用

要用起來也非常容易,只要在想顯示讀取的 HTML 元素上加上 wire:loading,在讀取時就會顯示這個元素的內容!

<button wire:click="postSomething">發送</button>
<h5 wire:loading>
    讀取...
</h5>

注意:這邊的讀取是只要有任何讀取都會被觸發,如果要針對某個操作產生的讀取單獨顯示請參考下段文章。

在讀取速度很快時會導致顯示讀取的區塊閃爍,透過 .delay 可以只顯示 200ms 以上的讀取。

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

其中 Livewire 還有提供一些方法來方便解決閃爍或是CSS的問題

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

當然也能在讀取時不顯示某些區塊的內容

<button wire:click="postSomething">發送</button>
<h5 wire:loading.remove>
    讀取時這行會看不見
</h5>

針對目標

比較常見的使用方式都會針對某些事件觸發時才顯示讀取,像是送出表單時再顯示讀取就好。 Livewire 中可以透過 wire:target 來指定 Function 或是 model

如此一來就只會對 postSomething() 這個 function 觸發時才會顯示這個讀取。

<button wire:click="postSomething">發送</button>
<h5 wire:loading wire:target="postSomething">
     讀取...
</h5>

讀取時更改 Class 及 Attributes

可以透過 wire:loading.classwire:loading.class.remove 來增減 Class,以及透過 wire:loading.attr 來增加 HTML標籤 上的屬性。

最常用的做法就是在按下按鈕送出後,給按鈕一個 disabled 讓他不能夠再被按下!

<button wire:click="postSomething" wire:loading.attr="disabled">發送</button>

上一篇
Day 11 | 嵌套元件(二)
下一篇
Day 13 | 元件狀態:輪詢 Polling
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言