如何在 livewire 惰性佔位符中使用 laravel 元件

Question

我想在 livewire 3 佔位符內加入我的 laravel 元件的骨架 到目前為止我已經嘗試過：

透過包含 Laravel 元件來實作 Livewire 類別：

public function placeholder()
{
    return <<<'HTML'
        <x-skeleton />
    HTML;
}

上述方法沒有渲染任何內容，

但是當我嘗試使用像這樣的直接 HTML 時：

public function placeholder()

    {
        return <<<'HTML'
            <div class="card" aria-hidden="true">
                <div class="card-body">
                    <p class="card-text placeholder-glow">
                        <span class="placeholder col-12"></span>
                    </p>
                    <p class="card-text placeholder-glow">
                        <span class="placeholder col-12"></span>
                    </p>
                </div>
            </div>
        HTML;
    }

效果很好， 我更喜歡使用 laravel 元件，因為它的可重複使用性 那麼如何解決這個問題

Answer 1

只是想讓事情變得簡單。能否讓 Livewire 元件的視圖進行條件渲染。

範例：

在您的 Livewire 元件中

public $show_skeleton = true;

在 Livewire 元件的檢視中

    @if ($show_skeleton)
        
    @endif

在您的 Livewire 元件類別中

public function showSkeleton()
{
    $this->show_skeleton = true;
}

public function hideSkeleton()
{
    $this->show_skeleton = false;
}

現在使用上述方法來顯示和隱藏你的骨架。

Answer 2

根據文件，您可以在您的配置。因此，您可以建立一個呈現組件的視圖，然後在配置中設定它。這也使您不必在每個元件上定義相同的佔位符。

但是，從外觀上看，您可以傳入任何字串，因此您也可以只返回渲染視圖：view('view')->render()。同樣，與以前一樣，您可以只定義一個在其中渲染元件的視圖。