wire:offline

在实时应用中，提示用户设备已断网会很有帮助。

例如，若你用 Livewire 做博客平台，可能会希望在用户离线时通知他们，以免写完整篇文章却无法由 Livewire 保存到数据库。

Livewire 为此提供了 wire:offline 指令。把它加到组件内的元素上后，默认隐藏，用户断网时再显示：

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

网络恢复后，该元素会再次隐藏。

切换 class

加上 class 修饰符后，用户断网时会给元素添加 class；重新上线后会移除：

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

或者用 .remove 修饰符，在用户断网时移除某个 class。下例中，断网期间会从 <div> 上移除 bg-green-300：

<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
.class.remove="class-name"	离线时移除 CSS class
.attr="attribute"	离线时添加 HTML 属性