Laravel Blade侧边提示消息不重叠代码修正方案咨询

问题概述 #

在Laravel Blade中搭建错误提示消息组件时，多条错误消息会互相重叠，仅第一条可见，其余被遮挡。以下针对提供的AlpineJS和原生JavaScript代码分别给出修正方案。

AlpineJS代码修正 #

原问题分析 #

1. 初始状态下x-show="show"为false，元素隐藏导致$el.offsetHeight取值为0，translateY计算完全错误
2. 手动设置transform破坏了容器的自然布局，同时容器space-y-2与alert的mb-4造成间距重复
3. 后续alert的位置计算未结合已显示alert的实际高度，逻辑存在偏差

修正后代码 #

@if ($messages)
    <div {{ $attributes->merge(['class' => 'fixed top-0 right-0 mt-3 mr-3 z-50 flex flex-col space-y-4']) }}>
        @foreach ((array) $messages as $key => $message)
            <div class="flex p-4 text-white bg-red-500 border-t-4 border-red-700 rounded-lg shadow-lg" role="alert" 
                 x-data="{ show: false }" 
                 x-show="show" 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 translate-y-4"
                 x-init="setTimeout(() => { 
                     show = true; 
                     setTimeout(() => show = false, 5000); 
                 }, {{ $key }} * 6000);">
                <svg class="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                <div class="ml-3 text-sm font-medium">
                    {{ $message }}
                </div>
                <button @click="show = false" class="ml-auto text-lg font-semibold">&times;</button>
            </div>
        @endforeach
    </div>
@endif

修正点说明 #

• 容器添加flex flex-col，利用Flexbox实现自然垂直排列，通过space-y-4统一设置alert间距，移除alert的mb-4避免重复间距
• 删除手动计算transform的逻辑，让Flexbox自动管理布局，彻底解决重叠问题
• 优化过渡动画参数，让alert的显示/隐藏过程更流畅自然
• 依赖x-show控制元素状态，确保元素显示时能正确参与布局计算

原生JavaScript代码修正 #

原问题分析 #

1. 仅在alert显示时计算一次位置，前面的alert关闭后，后续alert不会自动调整位置，仍保持错误偏移
2. 初始hidden状态下offsetHeight为0，导致首次位置计算完全失效
3. 同样存在容器space-y-2与alertmb-4的间距重复问题

修正后代码 #

@if ($messages)
    <div {{ $attributes->merge(['class' => 'fixed top-0 right-0 mt-3 mr-3 z-50 flex flex-col space-y-4']) }} id="alert-container">
        @foreach ((array) $messages as $key => $message)
            <div id="alert-{{ $key }}" class="alert hidden flex p-4 text-white bg-red-500 border-t-4 border-red-700 rounded-lg shadow-lg" role="alert">
                <svg class="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                <div class="ml-3 text-sm font-medium">
                    {{ $message }}
                </div>
                <button onclick="hideAlert({{ $key }})" class="ml-auto text-lg font-semibold">&times;</button>
            </div>
        @endforeach
    </div>

    <script>
        function showAlert(key, delay) {
            const alertElement = document.getElementById('alert-' + key);
            alertElement.classList.remove('hidden');
            
            setTimeout(() => {
                hideAlert(key);
            }, delay);
        }

        function hideAlert(key) {
            const alertElement = document.getElementById('alert-' + key);
            alertElement.classList.add('hidden');
        }

        @foreach ((array) $messages as $key => $message)
            setTimeout(() => {
                showAlert({{ $key }}, 5000);
            }, {{ $key }} * 6000);
        @endforeach
    </script>
@endif

修正点说明 #

• 容器改为flex flex-col space-y-4，利用Flexbox自动垂直排列所有alert，移除alert的mb-4
• 删除手动计算translateY的逻辑，让容器天然管理布局，解决重叠问题
• 若需要在alert关闭后重新调整剩余alert的位置（本方案因使用Flex无需额外操作），可在hideAlert函数中添加对应逻辑
• 简化显示逻辑，依赖Flexbox的布局能力，避免复杂的位置计算逻辑

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