wire:offline

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

例如，如果你在 Livewire 上构建了一个博客平台，你可能希望在用户离线时通知他们，这样他们就不会在 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 修饰符，你可以在用户失去连接时移除一个类。在此示例中，当用户失去连接时，bg-green-300 类将从 <div> 中移除：

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

切换属性

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

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

参考

wire:offline

修饰符

修饰符	描述
.class="class-name"	离线时添加 CSS 类
.class.remove="class-name"	离线时移除 CSS 类
.attr="attribute"	离线时添加 HTML 属性