离线状态

您是视觉学习者吗?
使用我们的深入屏幕录制掌握 Livewire
立即观看

在实时应用程序中,提供一个可视化指示,表明用户设备不再连接到互联网,可能会有所帮助。

Livewire 为此类情况提供了 wire:offline 指令。

通过将 wire:offline 添加到 Livewire 组件内部的元素,它将默认隐藏,并在用户断开连接时变为可见

<div wire:offline>
This device is currently offline.
</div>

切换类

添加 class 修饰符允许您在用户断开连接时向元素添加一个类。一旦用户重新联机,该类将再次被移除

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

或者,使用 .remove 修饰符,您可以在用户断开连接时移除一个类。在此示例中,<div> 中的 bg-green-300 类将在用户断开连接时被移除

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

切换属性

.attr 修饰符允许您在用户断开连接时向元素添加一个属性。在此示例中,“保存”按钮将在用户断开连接时被禁用

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