离线状态

未匹配的标注
本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

离线状态

通知用户失去互联网连接的时间有时很重要。 Livewire提供了有用的实用程序,可以根据用户的“离线”状态执行操作。

切换元素

当用户离线后您可以显示在页面上显示特定元素,只需要增加 wire:offline 属性即可。

<div wire:offline>
    You are now offline.
</div>

这个<div> 默认自动隐藏,用户断网之后会自动显示。

切换类名

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

当浏览器断网时,这个元素会增加 bg-red-300 类,联网之后会自动去除。

类似 wire:loading 您也可以反过来去除类名:

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

bg-green-300 类名会在断网后自动移除 。

切换属性

增加 .attr 修饰词允许您离线时增加属性。

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

浏览器离线后,按钮会被禁用。

同样也可以反过来使用 .remove 修饰词移除属性

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
发起讨论 查看所有版本


暂无话题~