基于Livewire实现搜索栏点击展开及图标切换（替换hover触发）

1. 创建Livewire组件 #

首先生成组件文件：

php artisan make:livewire ClickSearchBar

2. 编写组件逻辑（app/Http/Livewire/ClickSearchBar.php） #

用布尔变量控制搜索栏展开状态，添加切换方法：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ClickSearchBar extends Component
{
    public $isOpen = false;

    public function toggleSearch()
    {
        $this->isOpen = !$this->isOpen;
    }

    public function render()
    {
        return view('livewire.click-search-bar');
    }
}

3. 编写视图文件（resources/views/livewire/click-search-bar.blade.php） #

实现点击切换的UI，根据$isOpen状态渲染图标和搜索栏：

<div class="search-container relative">
    <!-- 触发按钮：切换搜索/关闭图标 -->
    <button wire:click="toggleSearch" class="search-toggle p-2">
        @if($isOpen)
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        @else
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        @endif
    </button>

    <!-- 搜索输入栏：根据状态显示/隐藏并添加过渡 -->
    <div class="search-input-wrapper absolute right-0 top-full mt-2 w-0 transition-all duration-300 ease-in-out @if($isOpen) w-64 @endif">
        <input type="text" placeholder="搜索..." class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
</div>

4. 添加基础样式（可放入你的CSS文件或Blade视图的style标签） #

移除原来的hover触发样式，改为基于状态的展开效果：

.search-container {
    position: relative;
    display: inline-block;
}

.search-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
    color: #333;
}

.search-input-wrapper {
    overflow: hidden;
}

5. 在页面中引入组件 #

在需要展示搜索栏的Blade视图中添加：

<livewire:click-search-bar />

额外优化（可选） #

如果需要点击页面其他区域关闭搜索栏，可以在组件类中添加监听：

protected $listeners = ['closeSearch' => 'closeSearch'];

public function closeSearch()
{
    $this->isOpen = false;
}

然后在主视图的根元素添加：

<div wire:click="$dispatch('closeSearch')" class="min-h-screen">
    <!-- 页面内容 -->
    <livewire:click-search-bar />
</div>

内容的提问来源于stack exchange，提问作者Md. Abdullah Al Rumy