如何修改Laravel Breeze的Dropdown组件实现悬停展开、点击跳转

以下是满足两个需求的具体修改方案：

• 实现鼠标悬停自动展开：给组件最外层容器添加鼠标进入/离开的事件监听，控制菜单的展开收起状态
• 实现点击触发链接直接跳转：移除原有触发区域的点击切换菜单逻辑，避免拦截a标签的默认跳转行为

修改后完整组件代码 #

@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-blue-light'])

@php
switch ($align) {
    case 'left':
        $alignmentClasses = 'origin-top-left left-0';
        break;
    case 'top':
        $alignmentClasses = 'origin-top';
        break;
    case 'right':
    default:
        $alignmentClasses = 'origin-top-right right-0';
        break;
}

switch ($width) {
    case '48':
        $width = 'w-48';
        break;
}
@endphp

<div class="relative m-auto" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false" @mouseenter="open = true" @mouseleave="setTimeout(() => open = false, 200)">
    <div>
        {{ $trigger }}
    </div>

    <div x-show="open"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
            style="display: none;"
            @click="open = false">
        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
            {{ $content }}
        </div>
    </div>
</div>

修改细节说明 #

1. 外层容器新增了两个事件：
   • @mouseenter="open = true"：鼠标移入组件区域时自动展开菜单
   • @mouseleave="setTimeout(() => open = false, 200)"：鼠标移出后延迟200ms收起菜单，避免鼠标移动过程中误触导致菜单频繁闪烁，你可以根据需要调整延迟时间，或者直接写成@mouseleave="open = false"去掉延迟
2. 移除了包裹{{ $trigger }}的div上的@click="open = ! open"事件：原来的点击事件会拦截trigger元素的默认行为，移除后如果trigger是a标签，点击时就会正常执行跳转逻辑
3. 原有其他逻辑保持不变：点击菜单外部自动收起、点击菜单内容区域自动收起、过渡动画等原有特性都可以正常使用，菜单内的链接点击也不会被拦截，跳转正常。

内容的提问来源于stack exchange，提问作者Thomas Read