Loading 状态

由于页面的每次操作都会触发 Livewire 与服务器的数据交互, 在某些情况下，页面可能不会立即对用户事件（例如点击）做出响应。由您决定何时应向用户提供某种加载状态。

在“加载”状态下切换元素

仅在等待操作完成（网络请求）时，带有 wire:loading 指令的元素才可见。

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

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

当 “Checkout” 按钮被点击， “Processing Payment…” 信息将会显示. 操作完成时，信息将会自动消失。

同样，您可以使用 .remove 修饰符在加载状态下隐藏元素。

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

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

针对特定操作

上面讲述的方法非常适合简单的组件，但是，只有特定操作才显示加载提示是很常见的。

<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"。

除了可以指定动作时显示，您还可以指定 wire:model 同步数据时显示加载状态。

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

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

切换类名

您也可以在加载状态时增加或者去除某个元素的类名,通过给 wire:loading 指令增加 .class 修饰词即可。

<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 类名就会被移除。

切换属性

类似类名， HTML 属性在加载状态期间也是可以移除或者增加：

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

现在点击 “Checkout” 按钮后，disabled="true" 就会被添加到进去。