changed 4 years ago  
Linked with GitHub

第三方套件 Flash Message 訊息顯示

Step 0.安裝套件 composer require laracasts/flash

Step 1.在要顯示訊息的視圖上加上Bootstrap樣式，一般放在<head>標籤內，如下:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

Step 2.在要顯示訊息的視圖上載入JS，一般放在</body>之前

<!-- Flash Message Overlay會用到，需保留 -->
$('#flash-overlay-modal').modal();

<!-- Flash Message 3秒之後消失，非必須 -->
$('div.alert').delay(3000).fadeOut(350);

Step 3.在視圖上要顯示訊息的位置加入以下程式碼

@include('flash::message')

使用Flash Message

//app/Http/Controllers/OrderController.php

public function store(){
    //儲存訂單到資料庫
    
    flash('訂單建立完成!!')->success(); //綠色框
    flash('訂單建立失敗!!')->error();   //紅色框
    flash('請向客服確認此訂單!!')->warning(); //橘色框
    flash('訂單建立完成!!')->overlay(); //跳出視窗
    flash()->overlay('Modal Message', 'Modal Title'); //跳出帶標題視窗
    flash('訂單建立完成')->important(); //加上關閉功能 
    flash('Message')->error()->important(); //結合外框與關閉功能
    
    return redirect('/');
}

如果需要顯示多個訊息，可多次呼叫flash()

進階技巧

讓訊息顯示3秒後自動消失

<script>
    $('div.alert').not('.alert-important').delay(3000).fadeOut(350); 
</script>

複寫訊息的視圖

開啟Terminal，輸入以下指令

php artisan vendor:publish --provider="Laracasts\Flash\FlashServiceProvider"

也可以不指定provider，只輸入vendor:publish，從選項去選也是一樣的

訊息沒有顯示的可能原因

我曾出現因為Session內容結構改變(flash_notification型別為集合而非預設的物件，可能是因為做了多次的flash())導致Blade判斷時認為沒有訊息需要顯示

解決方案：

Step 1.執行以下指令

php artisan vendor:publish –provider="Laracasts\Flash\FlashServiceProvider"

Step 2.修改 resources/views/vendor/flash/message.blade.php成以下內容

@if (Session::has('flash_notification'))
    @if (Session::has('flash_notification.overlay'))
        @include('flash::modal', ['modalClass' => 'flash-modal', 'title' => Session::get('flash_notification.title'), 'body' => Session::get('flash_notification.message')])
    @else
        @foreach (Session::get('flash_notification') as $item)
            @if (Session::has('flash_notification.important'))
                <div class="alert alert-important alert-{{ $item->level }}">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    {{ $item->message }}
                </div>
            @else
                <div class="alert alert-{{ $item->level }}">
                    {{ $item->message }}
                </div>
            @endif
        @endforeach

    @endif
@endif

如何在Livewire裡頭使用 Flash Message

因為 Livewire 並不會進行轉址以及重新渲染，導致無法正常顯示 Flash Message，這時候我們可以利用mattlibera/livewire-flash套件來達到同樣的效果

這個套件是在 Laracasts\Flash 套件的架構之上進行修改，因此使用時需要移除 Laracasts\Flash 以避免互相干擾的問題

安裝步驟

  • Step 1.下載套件

composer require mattlibera/livewire-flash

  • Step 2.加入樣式

此套件內建使用以下兩個樣式

TailwindCSS

透過CDN安裝
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
透過NPM安裝

FontAwesome
  • Step 3.調整視圖

在要呈現 Flash Message 的位置加入以下程式碼

<livewire:flash-container />

使用方法

如要在正常轉址後呈現 Flash Message，可比照laracasts/flash套件的做法來撰寫，如下:

public function store()
{
    flash('Success!');

    return redirect()->back();
}

如果要在 Livewire 環境下呈現 Flash Message，請改成以下做法:

public function livewireAction()
{
    flash('Your request was successful!')->success()->livewire($this);
}
Select a repo