README

• 支持将多条消息闪现到会话中
• 灵活的消息 - 用你的自定义数据填充 $options 数组
• 辅助方法，易于记忆，并允许 清洁控制器
• 包含以下 Inertia + Vue 实现示例
• 在 Laravel 10 上运行的自动化测试

安装

composer require rboonzaijer/laravel-multiple-flash-messages:^1.0

用法

class UserController
{
    public function store()
    {
        // ...

        flash('User created');

        flashWarning('User has no permissions yet');

        return to_route(...);
    }

Blade 视图示例

{{-- /resources/views/layouts/app.blade.php --}}

@include('partials.flash-messages.container')

{{-- /resources/views/partials/flash-messages/container.blade.php --}}

@if(session()->has('messages'))
    <div class="flash-messages">
        @foreach(session()->get('messages') as $index => $message)
            @include('partials.flash-messages.message', [
                'index' => $index,
                'message' => $message
            ])
        @endforeach
    </div>
@endif

{{-- /resources/views/partials/flash-messages/message.blade.php --}}

<div class="alert alert-{{ $message['type'] }}" onclick="javascript:this.remove();">
    <span>{{ $message['message'] }}</span>
</div>

灵活 - 使用你自己的消息类型和自定义数据

flash('Flagged', [
    'type' => 'danger-flagged',
    'description' => 'You have been flagged for creating to many users',
    'details' => [
        'ticket' => 123,
        'urls' => [
            'https://example.com',
            'http://example.com',
        ]
    ]
]);

{{-- /resources/views/partials/flash-messages/message.blade.php --}}

<div class="{{ $message['type'] }}" id="flash-message-{{ $index }}">
    <span class="title">
        {{ $message['message'] }}

        @if(isset($message['details']['ticket']))
            <span>- Ticket #{{ $message['details']['ticket'] }}</span>
        @endif
    </span>

    @if(isset($message['description']))
        <p class="description">
            {{ $message['description'] }}
        </p>
    @endif

    @if(isset($message['details']['urls']))
        <ul class="urls">
            @foreach($message['details']['urls'] as $index => $url)
                <li>
                    <a href="{{ $url }}">
                        {{ $url }}
                    </a>
                </li>
            @endforeach
        </ul>
    @endif
</div>

辅助方法

这些辅助方法都是可用的，并且它们都使用相同的参数。

• @param string $message ( 必需 ) - 包含消息
• @param array $options ( 默认 = [ ] ) - 在数组中添加其他信息
• @param boolean $flashToSession ( 默认 = true ) - 用于特殊用例（见下文）

flash($message, $options, $flashToSession);
flashInfo($message, $options, $flashToSession);
flashSuccess($message, $options, $flashToSession);
flashWarning($message, $options, $flashToSession);
flashError($message, $options, $flashToSession);

手动闪现到会话中

这可以用于当你只想在满足特定条件时发送消息时，例如

flash('Saved', [], Auth::user()->hasNotificationsEnabled());

或

flash('Saved', [], false);

// ...

if(Auth::user()->hasNotificationsEnabled()) {
    flashMessagesToSession();
}

Inertia + Vue + Tailwind + DaisyUI 示例

• https://inertia.laravel.net.cn/pages#persistent-layouts
• https://inertia.laravel.net.cn/pages#default-layouts
• https://tailwind.org.cn/docs/guides/laravel
• https://daisyui.cn/components/toast/

// app/Http/Middleware/HandleInertiaRequests.php

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'messages' => fn () => session()->get('messages'),
    ]);
}

<script setup>
/* /resources/js/Shared/Layout.vue */

import FlashMessages  from '../Shared/FlashMessages.vue';
</script>

<template>
    <!-- ... -->

    <FlashMessages />

    <!-- ... -->
</template>

<!-- /resources/js/Shared/FlashMessages.vue -->

<template>
    <div v-if="$page.props.messages" class="toast toast-top toast-end">
        <div v-for="message, index in $page.props.messages" :key="index" class="flex justify-between alert" :class="'alert-' + message['type']">
            <span>{{ message['message'] }}</span>

            <span class="btn btn-xs" @click="$page.props.messages.splice(index, 1)">x</span>
            <!-- Note: officially you should not remove props like this, but for messages I see no issue... -->
        </div>
    </div>
</template>

/* tailwind.config.js */
/* Don't forget to set a safelist for classes that should always be available */

safelist: [
    'toast',
    'toast-top',
    'toast-end',
    'alert',
    'alert-info',
    'alert-success',
    'alert-warning',
    'alert-error',
],

测试

composer run test