如何在 livewire 惰性佔位符中使用 laravel 元件
P粉935883292
P粉935883292 2024-04-06 20:02:10
0
2
930

我想在 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 元件,因為它的可重複使用性 那麼如何解決這個問題

P粉935883292
P粉935883292

全部回覆(2)
P粉642919823

只是想讓事情變得簡單。能否讓 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;
}

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

P粉035600555

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板