Nas*_*wan 3 php laravel laravel-livewire
我使用Livewire，如何在所有页面上放置加载器但调用一次
导航.blade.php
<html>
<head>
@livewireStyles
</head>
<body>
<livewire:layouts.header/>
{{ $slot }}
@livewireScripts
</body>
</html>
header.blade.php
<div>
<div class="spinner" wire:loading></div>
</div>
欢迎.blade.php
<div>
<input wire:model="search" placeholder="Search">
</div>
当我在输入中写入内容时，它不会显示加载器。
我只想调用此加载器一次并在每个页面上工作
截至目前，wire:loading仅适用于单个 Livewire 组件的范围。没有wire:loading.all。
简单的解决方案：创建一个刀片组件并将其命名为 x-loading
<div class="page-loading" wire:loading>
Loading...
</div>
设置组件的样式，使其显示在页面的右下角等位置。您可能想使用position: absolute.
将此组件放置在您想要显示加载指示器的每个 Livewire 组件的视图中。
该解决方案有两个缺点。首先，如果您尝试将加载指示器放置在具有绝对位置的容器中（如模态），则它的位置不会与您预期的位置相同。其次，加载刀片组件将位于每个带电组件中。
我刚刚测试了一个更优雅的解决方案。为此，您必须使用 livewire js 挂钩：https://laravel-livewire.com/docs/2.x/reference
<script>
window.onload = function() {
Livewire.hook('message.sent', () => {
window.dispatchEvent(
new CustomEvent('loading', { detail: { loading: true }})
);
})
Livewire.hook('message.processed', (message, component) => {
window.dispatchEvent(
new CustomEvent('loading', { detail: { loading: false }})
);
})
}
</script>
<div
x-data="{ loading: false }"
x-show="loading"
@loading.window="loading = $event.detail.loading"
class="absolute z-50 bottom-20 right-20"
>
This is taking way too long...
</div>
例如，将此代码放置在您的应用程序布局中。
| 归档时间： |
|
| 查看次数： |
5184 次 |
| 最近记录： |