-
入门
-
基础
-
特性
-
HTML 指令
-
概念
-
高级
-
软件包
离线状态
您是视觉学习者吗?
使用我们的深入屏幕录制掌握 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>