如何为每个组件制作 Wire:loading

Question

我用的是Livewire，怎么能在所有页面都放一个loder，只调用一次

nav.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>

welcome.blade.php

<div>
       <input wire:model="search" placeholder="Search">
    </div>

当我在input里写东西的时候，它不显示loder
我只想调用此加载器一次并在每个页面上工作

Answer 1

截至今天 wire:loading 仅适用于单个 livewire 组件的范围。没有wire:loading.all.

简单的解决方案：创建一个 blade 组件并命名，例如x-loading

<div class="page-loading" wire:loading>
    Loading...
</div>

设置组件的样式，使其显示为例如在页面的右下角。您可能想使用 position: absolute.

将此组件放置在您想要为其显示加载指示器的每个 livewire 组件的视图中。

此解决方案有两个缺点。首先，如果您尝试将加载指示器放置在具有绝对位置的容器中（如模态），它不会与您预期的位置相同。其次，加载 blade 组件将在每个 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>

放置此代码，例如在您的应用布局中。

如何为每个组件制作 Wire:loading

How to make Wire:loading for every components

php

laravel

laravel-livewire