sweetalert php,laravel弹窗插件sweetalert

Easy Sweet Alert Messages for Laravel

c2b57fdec762fc5b1610b99faef195f1.png

68747470733a2f2f7374796c6563692e696f2f7265706f732f33383933353934322f736869656c64

Installation

First, pull in the package through Composer.composer require uxweb/sweet-alert

If using laravel < 5.5 include the service provider within config/app.php.

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

And, for convenience, add a facade alias to this same file at the bottom:

'aliases' => [    'Alert' => UxWeb\SweetAlert\SweetAlert::class,];Note that this package works only by using the BEAUTIFUL REPLACEMENT FOR JAVASCRIPT'S "ALERT".

Finally, you need to get the Sweet Alert library; you can do so by:

Downloading the .js and .css from the website.

If you are using Laravel Elixir for your front-end workflow, add sweet alert with yarn or npm.

Using Yarn:

yarn add sweetalert --dev

Using Npm:

npm install sweetalert --save-dev

Usage

Using the Facade

First import the Alert facade in your controller.

use Alert;

Within your controllers, before you perform a redirect...

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 functionalert($message = null, $title = '')

In addition to the previous listed methods you can also just use the helper function without specifying any message type. Doing so is similar to:alert()->message('Message', 'Optional Title')

Like with the Facade we can use the helper with the same methods: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');

Within your controllers, before you perform a redirect...

/** * Destroy the user's session (logout). * * @return Response */public function destroy(){    Auth::logout();    alert()->success('You have been logged out.', 'Good bye!');    return home();}

For a general information alert, just do: alert('Some message'); (same as alert()->message('Some message');).

Using the Middleware

Middleware Groups

First register the middleware in web middleware groups by simply adding the middleware class UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class into the $middlewareGroups of your app/Http/Kernel.php class:

protected $middlewareGroups = [        'web' => [            \App\Http\Middleware\EncryptCookies::class,            ...            \UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class,        ],        'api' => [            'throttle:60,1',        ],    ];Make sure you register the middleware within the 'web' group only.

Route middleware

Or if you would like to assign the middleware to specific routes only, you should add the middleware to $routeMiddleware in app/Http/Kernel.php file:

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

Next step: within your controllers, set your return message (using with()) and send the proper message and proper type.

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

or

return redirect()->back()->with('errors', 'Profile updated!');NOTE: When using the middleware it will make an alert to display if it detects any of the following keys flashed into the session: errors, success, warning, info, message, basic.

The View

Finally, to display the alert in the browser, you may use (or modify) the view that is included with this package. Simply include it in your layout view:

html>

Document

Welcome to my website...

@include('sweet::alert')

REMEMBER: Always include the .css and .js files from the sweet-alert library.

Final Considerations

By default, all alerts will dismiss after a sensible default number of seconds.

But not to worry, if you need to specify a different time you can:

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

Also, if you need the alert to be persistent on the page until the user dismiss it by pressing the alert confirmation button:

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

You can render html in your message with the html() method like this:

// -> html will be evaluated    alert('Click me')->html()->persistent("No, thanks");

Customize

If you need to customize the alert message partial, run:

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

The package view is located in the resources/views/vendor/sweet/ directory.

You can customize this view to fit your needs.

A sweet-alert.php configuration file will be published to your config directory as well, this will allow you to set the default timer for all autoclose alerts.

Configuration Options

You have access to the following configuration options to build a custom view: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')

Please check the CONFIGURATION section in the website for all other options available.

Default View

@if (Session::has('sweet_alert.alert'))

@endif

The sweet_alert.alert session key contains a JSON configuration object to pass it directly to Sweet Alert.

Note that {!! !!} are used to output the json configuration object unescaped, it will not work with {{ }} escaped output tags.

Custom View

@if (Session::has('sweet_alert.alert'))

@endif

Note that you must use "" (double quotes) to wrap the values except for the timer option.

Tests

To run the included test suite:

vendor/bin/phpunit

Demo

Alert::message('Welcome back!');return Redirect::home();

b604f2106d23964c193141ba3435b900.png

Alert::message('Your profile is up to date', 'Wonderful!');return Redirect::home();

ee3098d640b0e3940874b37eb5800d9c.png

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

dd41b83f5167ea74c4718eca22d205be.png

Alert::info('Email was sent!');return Redirect::home();

2151d1f1f22a509f4b937462fe87a073.png

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

64209dbf1bf9013db9e490e6d54f1e78.png

Alert::success('Good job!');return Redirect::home();

0b9d1d6753aca5d7e507404d49b1efef.png

Alert::info('Random lorempixel.com : ')->html();return Redirect::home();

efabd9c9ef12eaad0095af4109ef82a5.png

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

6b5c83755e76453446327e1670e169e0.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值