Laravel 和 Livewire 在单击时更改按钮样式

Posted 2023-03-07

【中文标题】Laravel 和 Livewire 在单击时更改按钮样式

【英文标题】：Laravel and Livewire change button style on click

【发布时间】：2021-05-04 17:28:57

【问题描述】：

我的 tailwindcss 中有两个按钮

<div class="flex flex-row">

<button class="-ml-px relative inline-flex items-center space-x-2 px-4 py-4 border border-blue-300 text-sm font-medium rounded-l-md text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-blue-500">
<span>Add</span>
</button>

<button class="-ml-px relative inline-flex items-center space-x-2 px-4 py-4 border border-gray-300 text-sm font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-blue-500">
<span>Set</span>
</button>

</div>

一个按钮是蓝色的，另一个是灰色的。 当我点击设置按钮时我想切换颜色，当我再次点击返回添加按钮时也一样。

【问题讨论】：

Livewire 的想法是管理与后端代码的交互，而不是修改前端操作上的类。我建议将 AlpineJS 用于此类事情，您可以轻松地以干净的方式做到这一点。

谢谢，请您帮忙，我是新手，正在苦苦挣扎

这取决于你想要达到的目标。你能详细说明你想要达到什么效果，什么时候？哪些颜色应该切换到哪个点击，从哪个颜色切换到哪个颜色？

我只想切换蓝色，就像我点击的任何按钮变成蓝色和其他灰色.. 谢谢

【参考方案1】：

正如我所提到的，Livewire 用于与后端代码进行交互。如果您想在前端交互之后为前端元素设置样式，请使用 JS 框架，如 AlpineJS 或纯 CSS。

如果你真的只是想改变焦点颜色，你可以选择@Digvijay 的答案：

<div class="flex space-x-4">
  <button class="flex px-4 py-2 bg-gray-100 text-gray-900 cursor-pointer hover:bg-blue-200 focus:text-blue-700 focus:bg-blue-200 focus:outline-none focus:ring-blue-600" tabindex="1">Add</button>
  <button class="flex px-4 py-2 bg-gray-100 text-gray-900 cursor-pointer hover:bg-blue-200 focus:text-blue-700 focus:bg-blue-200 focus:outline-none focus:ring-gray-600" tabindex="2">Set</button>
</div>

（见https://play.tailwindcss.com/mwspfpsTuU）

如果您希望即使在失去焦点后颜色也能保持不变，您可以在 AlpineJS 中使用类似这样的东西：

<div x-data=" highlightedButton: '' " class="flex space-x-4">
  <button @click="highlightedButton='add'" class="flex px-4 py-2 bg-gray-100 text-gray-900 hover:bg-blue-200" :class="'bg-blue-400': highlightedButton === 'add'" tabindex="1">Add</button>
  <button @click="highlightedButton='set'" class="flex px-4 py-2 bg-gray-100 text-gray-900 hover:bg-blue-200" :class="'bg-blue-400': highlightedButton === 'set'" tabindex="2">Set</button>
</div>

最后，如果您始终跟踪 Livewire 组件中的 Add / Set 状态（这很难说，因为您的标记中根本没有 livewire 代码），然后像@AliAli 在他的回答中描述的那样做。 :-)

【参考方案2】：

编辑： 如果有人提出这个答案，这是需要存储按钮状态时的解决方案，在其他情况下，您应该遵循@Lupinity Labs 的答案。

您可以使用 Livewire 事件侦听器来更改前端。

首先，在 Livewire php 模型中声明变量，如：

public $isSetClicked = false;
public $isAddClicked = false;

然后decalre函数来处理onClick事件：

public function SetClicked()
    
     //this will give you toggling behavior
     $this->isSetClicked == false ? $this->isSetClicked = true : $this->isSetClicked = false;

并以同样的方式声明 AddClicked。

然后在 Livewire 模板中将事件添加到按钮中，例如：

<button wire:click="SetClicked()" class="$isSetClicked  ? "color-class" : "other-color-class" the rest of your css classes">

【讨论】：

虽然这是一种可能的解决方案，但为每个按钮实现一个状态以及一种仅出于显示原因在后端切换这些状态的方法似乎是一种非常糟糕的做法。另一方面，如果 Livewire 组件无论如何都需要保持状态，我会同意这样做。

@LupinityLabs 是的，我完全同意你的看法，如果前端有很多变化，我不推荐我的答案，这绝对是我们需要像 AlpineJS 这样的 javascript 的地方。

当然这是不推荐的，但为什么只想改变按钮的颜色呢？必须有另一个交互，所以这个解决方案是完美的。谢谢阿里

【参考方案3】：

要使用 livewire 切换 html 属性，例如 class、id、href 等，您必须在 livewire (docs) 中使用 AlpineJS。例如，您想通过更改 livewire 组件中的某个内部状态（模型）来更改某些元素 CSS class 属性。例如通过单击某个链接。

/app/Http/Livewire/YourLivewireComponent.php

<?php
namespace App\Http\Livewire;
use Livewire\Component;

class YourLivewireComponent extends Component

    public $classChanged = false;

    public function render()
    
        return view('livewire.your-liveweire-component');
    

    public function myClickFunction()
    
        $this->classChanged = true;
    

/resources/views/livewire/your-livewire-component.blade.php

<a href="#" wire:click="myClickFunction">Click me</a>
<div x-data=" alpine_class_changed: @entangle('classChanged') " class="some classes" x-bind:class="alpine_class_changed ? 'my_add_class' : ''">some text</div>

/resources/views/somelaraveltemplate.blade.php

<p>some HTML code</p>
@livewire('your-liveweire-component')

【参考方案4】：

您需要使用 tabindex。结帐focus change on button 工作示例。

<div class="flex space-x-4">
  <div class="flex px-4 py-2 bg-blue-600 text-blue-100 cursor-pointer hover:bg-blue-700 focus:text-blue-700 focus:bg-blue-200 focus:outline-none focus:ring-blue-600" tabindex="1">Add</div>
  <div class="flex px-4 py-2 bg-gray-100 text-gray-600 cursor-pointer hover:bg-gray-200 focus:text-gray-100 focus:bg-gray-600 focus:outline-none focus:ring-gray-600" tabindex="1">Set</div>
</div>

【讨论】：

这个答案与问题有什么关系？此外，在两个不同的元素上使用相同的 tabindex 似乎也没有帮助。另外，你为什么把他的按钮变成div？我很困惑。