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

如何解决在刀片中创建自定义刀片html元素

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

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

我定义了一个简单的card指令，如下所示：

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 7引入了刀片组件。它使您可以做到这一点。参见此处：https://laravel.com/docs/7.x/blade#components。

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

在您的情况下，可能看起来像这样：

这就是调用组件的方式

DEFINER

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

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

应用程序/视图/组件/Card.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>

,

您可以使用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>

,

肯定是一种独特而有趣的方法。尝试用不带“ $”符号的引号将其写入，例如：

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

可能有效