Laravel SweetAlerts插件返回jquery插件SweetAlerts弹出框

阅读 (19)
一个简单的PHP包,用于向Laravel 框架显示SweetAlerts

安装 Installation

首先,通过Composer安装插件包。

    composer require uxweb/sweet-alert

如果使用laravel <5.5包含其中的服务提供商config/app.php


'providers' => [
    UxWeb\SweetAlert\SweetAlertServiceProvider::class,
];

并且,为方便起见,在同一文件中的底部添加aliases别名:


'aliases' => [
    'Alert' => UxWeb\SweetAlert\SweetAlert::class,
];

请注意,此程序包仅适用于使用BEAUTIFUL REPLACEMENT FOR JAVASCRIPT''ALERT'

最后,您需要获得Sweet Alert插件; 你可以这样做:

sweetalert网站下载.js和.css 。

如果您使用Laravel Elixir作为前端工作流程,请使用yarn或npm 添加。

Yarn:


    yarn add sweetalert --dev

Npm:


    npm install sweetalert --save-dev

使用 Usage

使用Facade

首先在控制器中导入Alert。


use Alert;

在您的控制器中,在执行重定向之前......


public function store()
{
    Alert::message('Robots are working!');

    return Redirect::home();
}
  • Alert::message('Message', 'Optional Title');
  • Alert::basic('Basic Message', 'Mandatory Title');
  • Alert::info('Info Message', 'Optional Title');
  • Alert::success('Success Message', 'Optional Title');
  • Alert::error('Error Message', 'Optional Title');
  • Alert::warning('Warning Message', 'Optional Title');

使用辅助函数 Using the helper function

  • alert($message = null, $title = '')

除了前面列出的方法之外,您还可以使用辅助函数而不指定任何消息类型。这样做类似于:

  • alert()->message('Message', 'Optional Title')

与Facade一样,我们可以使用相同的方法使用帮助器:

  • alert()->message('Message', 'Optional Title');
  • alert()->basic('Basic Message', 'Mandatory Title');
  • alert()->info('Info Message', 'Optional Title');
  • alert()->success('Success Message', 'Optional Title');
  • alert()->error('Error Message', 'Optional Title');
  • alert()->warning('Warning Message', 'Optional Title');
  • alert()->basic('Basic Message', 'Mandatory Title')->autoclose(3500);
  • alert()->error('Error Message', 'Optional Title')->persistent('Close');

在您的控制器中,在执行重定向之前......


/**
 * Destroy the user's session (logout).
 *
 * @return Response
 */
public function destroy()
{
    Auth::logout();

    alert()->success('You have been logged out.', 'Good bye!');

    return home();
}

对于一般信息警报,只需执行:( alert('Some message');相同alert()->message('Some message');)。

使用中间件

中间件组

首先通过简单地将中间件类添加UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class到app / Http / Kernel.php类的$ middlewareGroups中来注册Web中间件组中的中间件:


    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            ...
            \UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class,
        ],

        'api' => [
            'throttle:60,1',
        ],
    ];

确保仅在“web”组中注册中间件。

路由中间件

如果你想分配中间件到指定路由,你应该将中间件添加到$routeMiddlewareapp/Http/Kernel.php文件中:


protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    ....
    'sweetalert' => \UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class,
];

下一步:在您的控制器中,设置您的返回消息(使用with())并发送正确的消息和正确的类型。


return redirect('dashboard')->with('success', 'Profile updated!');


return redirect()->back()->with('errors', 'Profile updated!');

:当使用中间件它将为显示一个警告,如果它检测到一次性session (flash session) 中存在以下任一键:errorssuccesswarninginfomessagebasic。就会显示

The View

最后,要在浏览器中显示弹出框,您可以使用(或修改)此程序包附带的视图。只需将其包含在布局视图中:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/sweetalert.css">
</head>
<body>

    <div class="container">
        <p>Welcome to my website...</p>
    </div>

    <script src="js/sweetalert.min.js"></script>

    <!-- Include this after the sweet alert js file -->
    @include('sweet::alert')

</body>
</html>

请记住:前端始终要加载sweet-alert库中的.css和.js文件。

最后的考虑因素

默认情况下,所有警报将在合理的默认秒数后消失。

但不要担心,如果您需要指定不同的时间:


    // -> Remember!, the number is set in milliseconds
    alert('Hello World!')->autoclose(3000);

此外,如果您需要在页面上保持警告,直到用户通过按警告确认按钮将其解除为止:


    // -> The text will appear in the button
    alert('Hello World!')->persistent("Close this");

您可以使用html()方法在消息中呈现html,如下所示:


    // -> html will be evaluated
    alert('<a href="#">Click me</a>')->html()->persistent("No, thanks");

定制

如果需要自定义警报消息partial,请运行:


    php artisan vendor:publish --provider "UxWeb\SweetAlert\SweetAlertServiceProvider"

包视图位于resources/views/vendor/sweet/目录中。

您可以自定义此视图以满足您的需求。

一个sweet-alert.php配置文件将被发布到你的config目录,以及,这将允许您设置默认定时器所有自动关闭警报。

配置选项

您可以访问以下配置选项来构建自定义视图:


Session::get('sweet_alert.text')
Session::get('sweet_alert.type')
Session::get('sweet_alert.title')
Session::get('sweet_alert.confirmButtonText')
Session::get('sweet_alert.showConfirmButton')
Session::get('sweet_alert.allowOutsideClick')
Session::get('sweet_alert.timer')

请查看网站上的CONFIGURATION部分,了解所有其他可用选项。

默认视图


@if (Session::has('sweet_alert.alert'))
    <script>
        swal({!! Session::get('sweet_alert.alert') !!});
    </script>
@endif

sweet_alert.alert会话密钥包含一个JSON配置对象,直接把它传递给甜警报。

请注意,{!! !!}用于输出未转义的json配置对象,它不适用于{{ }}转义输出标记。

自定义视图


@if (Session::has('sweet_alert.alert'))
    <script>
        swal({
            text: "{!! Session::get('sweet_alert.text') !!}",
            title: "{!! Session::get('sweet_alert.title') !!}",
            timer: {!! Session::get('sweet_alert.timer') !!},
            type: "{!! Session::get('sweet_alert.type') !!}",
            showConfirmButton: "{!! Session::get('sweet_alert.showConfirmButton') !!}",
            confirmButtonText: "{!! Session::get('sweet_alert.confirmButtonText') !!}",
            confirmButtonColor: "#AEDEF4"

            // more options
        });
    </script>
@endif

请注意,必须使用""(双引号)来包装除timer选项之外的值。

测试

要运行包含的测试套件:


vendor/bin/phpunit

演示


Alert::message('Welcome back!');

return Redirect::home();

A simple alert with title

Alert::message('Thanks for comment!')->persistent('Close');

return Redirect::home();

A simple alert with title and button


Alert::info('Email was sent!');

return Redirect::home();

A info alert


Alert::error('Something went wrong', 'Oops!');

return Redirect::home();

A error alert


Alert::success('Good job!');

return Redirect::home();

A success alert


Alert::info('Random lorempixel.com : <img src="http://lorempixel.com/150/150/">')->html();

return Redirect::home();

HTML in message


Alert::success('Good job!')->persistent("Close");

return Redirect::home();

更新于:2018-07-16 15:02:10

留言

发表评论

标记为*的字段是必填项(邮箱地址不会被公开), 由于国内舆论控制, 评论需要管理员审核通过方可展示

返回顶部