README

此软件包为您的Laravel应用程序提供Tailwind CSS和Vue.js优化的通知设置。

安装

您可以通过Composer安装此软件包

composer require depsimon/laravel-alerts

Laravel中的使用

在您的控制器中，在执行重定向之前，请调用alert()函数。

public function show()
{
    alert('Resource Found!');

    return back();
}

您还可以这样做

• alert_info('信息消息')：显示'信息'消息。
• alert_success('成功消息')：显示'成功'消息。
• alert_warning('警告消息')：显示'警告'消息。
• alert_error('错误消息')：显示'错误'消息。
• alert('消息', '消息标题')：显示带有标题的消息。

Vue中的使用

在您的Vue.js组件中，您可以$emit一个alert事件。

Events.$emit('alert', {
    title: "Success",
    message: "Your profile has been updated with success.",
    type: "success"
})

只需提供message字段即可。

配置

设置警报后，您可以在视图中显示它们。我们为您提供了一个与Vue.js和Tailwind CSS兼容的模板。

您可以自由使用并按需定制。

@include('alerts::alerts')

您还需要发布我们的Vue.js组件。默认情况下，它们将在/resources/assets/js/vendor/alerts文件夹中导入。

php artisan vendor:publish --provider="Depsimon\Alerts\AlertsServiceProvider" --tag="components"

然后在您的应用程序中导入它们。

window.Vue = require('vue')
window.Events = new Vue // This will be used to emit/receive alerts

Vue.component('alerts', require('./vendor/alerts/components/Alerts.vue'))

如果您不想使用默认模板或Vue.js组件，可以发布视图并按需定制。只需知道会话键为alerts。

以下是一个不带Vue.js的自定义模板示例

@foreach (session('alerts', collect())->toArray() as $alert)
    <div class="alert alert-{{ $alert['type'] }}">
        @if ($alert['title'])
        <div class="alert-title">{{ $alert['title'] }}</div>
        @endif

        <div class="alert-message">{!! $alert['message'] !!}</div>
    </div>
@endforeach

{{ session()->forget('alerts') }}

多个警报

需要发送多个警报？没问题。

alert_success('Account Created with Success!');
alert_info('Welcome aboard!');

return redirect('home');

图标

默认图标来自FontAwesome。您可以在Alert.vue组件中轻松自定义它们。