$attributes->merge ：我做错了什么

Question

我在 laravel 中有以下刀片组件。我正在使用顺风。位于views/components/indigo-button-sm.blade.php

<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex justify-center py-1 px-1 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']) }}>
    {{ $slot }}
</button>

我希望能够即时更改组件。也就是说，我使用上面的组件来显示“保存”按钮。但随后我想显示一个按钮，上面写着“确认”您的输入，并稍微更改按钮的外观，以在视觉上暗示这是一个不同的选择。

具体来说，我有一个自动完成功能，用户正在输入一个我提供超过 2,000 个选择（学校）的项目。但是，如果用户输入的学校不在我的数据库表列表中，我希望他们确认他们输入的学校正确，所以我想显示“确认”您的输入按钮，只是为了确保。如果他们选择的学校已经在列表中，我不会要求他们确认输入。

所以，我想更改保存按钮

bg-indigo-600 hover:bg-indigo-700

确认按钮的配色方案略有不同。

bg-indigo-800 hover:bg-indigo-900

或者

<x-indigo-button-sm x-show="showsaveschool" wire:click="saveSchoolInfo">Save</x-indigo-button-sm>
<x-indigo-button-sm x-show="showconfirmschool" wire:click="confirmSaveSchoolInfo">Confirm</x-indigo-button-sm>

因此他们输入学校，但该学校不在查找列表中。他们单击“保存”按钮。保存按钮消失，确认按钮显示，确认按钮下方会显示一段文本。

当我输入此内容时，我开始认为创建一个“确认”按钮并始终使用它会更好。

反正。我认为 $attributes(merge['']) 允许您更改属性，但我认为它只允许您添加属性。因此，如果您有一个边距类，在组件中说“my-0”，它似乎不允许新的类似类，例如“my-5”

我们将不胜感激您的评论。

Answer 1

对于class属性，您可以使用条件合并来确保仅在尚未设置冲突的属性时插入该属性。该class()方法传递一个数组。如果数组条目具有数字索引，则该值始终合并到class属性中。但是，如果条目具有非数字索引，则如果值为true，则该索引将合并到属性中。class

<button
    {{ $attributes->class([
          'inline-flex justify-center py-1 px-1',
          'border border-transparent shadow-sm',
          'text-sm font-medium rounded-md text-white',
          'focus:outline-none focus:ring-2',
          'focus:ring-offset-2 focus:ring-indigo-500'
          'bg-indigo-600 hover:bg-indigo-700' => hasCustomBackground(),
       ])
       ->merge([
          'type' => 'button',
       ])
    }}
>
    {{ $slot }}
</button>

然后，根据传递的类值创建一个hasCustomBackground() 组件方法：

class IndigoButtonSm extends Component
{
    public string class;

    /**
     * Checks if the class attribute contains "bg-indigo"
     */
    public function hasCustomBackground(): bool
    {
        $classes = collect(explode(" ", $this->class));
        return $classes->contains(fn ($c) => str_contains("bg-indigo", $c));
    }

    ...
}

我以前从未使用过此功能，但根据文档它应该可以工作吗？