Skip to content

离线状态

在实时应用程序中,提供用户设备不再连接到互联网的视觉指示可能很有帮助。

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

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

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

切换类

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

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

或者,使用 .remove 修饰符,你可以在用户失去连接时移除类。在此示例中,当用户失去连接时,bg-green-300 类将从 <div> 中移除:

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

切换属性

.attr 修饰符允许你在用户失去连接时向元素添加属性。在此示例中,当用户失去连接时,"Save"按钮将被禁用:

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