在刀片中创建自定义刀片 html 元素答案

【问题标题】：Create custom blade html elements in blade在刀片中创建自定义刀片 html 元素
【发布时间】：2020-12-14 22:49:43
【问题描述】：

我有一些使用 HTML 构建的常用复杂 UI 元素（例如卡片、按钮组等）为此，我想创建可重复使用的刀片元素。

我找到的最接近的解决方案是自定义刀片指令。

我定义了一个简单的卡片指令如下：

Blade::directive('card', function ($expression) {
    list($title, $icon, $buttons) = explode(',', str_replace(["'"], '', $expression));

    $str = '<div class="card card-custom">
                         <div class="card-header">
                             <div class="card-title">
                                 <span class="card-icon">
                                     <i class="'.$icon.'"></i>
                                 </span>
                                 <h3 class="card-label">'.$title.'
                             </div>
                             <div class="card-toolbar">'.$buttons.'
                             </div>
                         </div>
                         <div class="card-body">';
    return "<?php echo '".$str."'; ? >";
});

Blade::directive('endcard', function () {
    return '</div></div>';
})

在我的刀片中，我只是这样称呼它：

@card('Dashboard', 'fa fa-tachometer', $buttonsHtml)
    <div> Card content here...</div>
@endcard

想要附上的图片。

问题是我不能将任何参数作为变量传递（如 $buttonsHtml），因为它会将其字面意思视为“$buttonsHtml”。

我没有看到有人在将变量传递给自定义指令之前尝试对其进行评估。甚至有可能做到这一点吗？

如果我需要传递 $buttonsHtml 变量的实际值，那将毫无用处，因为它是由其他函数生成的。任何人都有解决方法的想法，甚至可以替代使用自定义指令？

【问题讨论】：

标签： laravel laravel-blade laravel-7

【解决方案1】：

Laravel 7 引入了刀片组件。它允许您这样做。见这里：https://laravel.com/docs/7.x/blade#components。

可以使用类似 HTML 的标签调用这些组件，并且可以传递数据。

在您的情况下，这可能如下所示：

这就是你调用组件的方式

<x-card title="Dashboard" icon="fa fa-tachometer">
    <x-slot name="buttons">
        Your buttons HTML here
    </x-slot>
    Card content here
</x-card>

资源/视图/组件/card.blade.php

<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon">
                <i class="{{ $icon }}"></i>
            </span>
            <h3 class="card-label">{{ $title }}</h3>
        </div>
        <div class="card-toolbar">
            {{ $buttons }}
        </div>
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
</div>

app/View/Components/Card.php

class Card extends Component
{
    /** @var string Card title */
    public $title;

    /** @var string Card icon */
    public $icon;
    
    public function __construct($title, $icon)
    {
        $this->title = $title;
        $this->icon = $icon;
    }

    public function render()
    {
        return view('components.card');
    }
}

【讨论】：

非常感谢，这是一个很好的答案。我只为更少的代码选择了另一个答案，这正是我正在寻找的。span>

【解决方案2】：

您可以使用 Blade components 创建可重用的 html 元素，因为您的 card 元素非常简单，我会使用 anonymous component。

创建以下文件：

“资源/视图/组件/card.blade.php”

@props([
'title' => '',
'icon' => '',
])

<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon"><i class="{{ $icon }}"></i></span>
            <h3 class="card-label">{{ $title }}</h3>
        </div>
        @if(isset($toolbar))
            <div class="card-toolbar">{{ $toolbar }}</div>
        @endif
    </div>
    <div class="card-body">{{ $slot }}</div>
</div>

现在您可以在视图文件中像这样使用它：

<!-- without toolbar -->
<x-card title="Dashboard" icon="fa fa-tachometer">
    <div> Card content here...</div>
</x-card>

<!-- with toolbar -->
<x-card title="Dashboard" icon="fa fa-tachometer">
    <x-slot name="toolbar">
        {!! $buttonsHtml !!}
    </x-slot>

    <div> Card content here...</div>
</x-card>

【讨论】：

非常感谢，接受匿名组件。

【解决方案3】：

这无疑是一种独特而有趣的方法。尝试将其写在不带“$”符号的引号中，例如：

`@card('Dashboard', 'fa fa-tachometer', 'buttonsHtml')
    <div> Card content here...</div>
@endcard`

它可能会起作用

【讨论】：

谢谢，我实际上尝试了很多传递变量的变体，但没有运气，我想我需要一种更复杂的评估方法。