Laravel中使用SweetAlert美化提示框Alert
The first step
使用composer安装Laravel到www目录下（这里以laravle5.6为例）
composer create-project --prefer-dist laravel/laravel blog 5.6.*若没有配置中国全量镜像则先配置镜像（当前项目 推荐配置全局镜像）
composer config repo.packagist composer https://packagist.phpcomposer.com全局镜像
打开命令行窗口（windows用户）或控制台（Linux、Mac 用户）并执行如下命令：
composer config -g repo.packagist composer https://packagist.phpcomposer.comSecond step
通过Composer拉入包。
composer require uxweb/sweet-alert
注：这里因为使用的laravel版本>5.5不需要如下操作（config/app.php）
'providers' => [
UxWeb\SweetAlert\SweetAlertServiceProvider::class,
];
'aliases' => [
'Alert' => UxWeb\SweetAlert\SweetAlert::class,
];使用Npm安装
npm install sweetalert@^2.0 --save-dev
The third step
创建控制器视图文件测试
$ php artisan make:controller SweetAlertDemo
同时创建视图文件(SweetAlert.blade.php)
在控制器中引入Alert(use Alert;)类并写一个函数测试用
public function index()
{
Alert::message('Robots are working!');
return view('SweetAlert');
}
编写视图文件SweetAlert.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.0.0/sweetalert.min.js"></script>
</head>
<body>
<div class="container">
<p>Welcome to my website...</p>
</div>
@include('sweet::alert')
</body>
</html>
注意：css与js必须要引入
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.0.0/sweetalert.min.js"></script>字段必须存在
@include('sweet::alert')The fourth step
编辑路由
Route::get('/SweetAlert', 'SweetAlertDemo@index');
测试效果
(Successful!!!)
The fifth step
根据参数查看不同类型的样式
路由
Route::get('/SweetAlert/{alertType?}', 'SweetAlertDemo@index');控制器函数
public function index($alertType = null)
{
Alert::message('Message', 'Optional Title');
switch ($alertType) {
case 'success':
Alert::success('Success Message', 'Optional Title');
break;
case 'basic':
alert()->basic('Basic Message', 'Mandatory Title');
break;
case 'info':
Alert::info('Info Message', 'Optional Title');
break;
case 'error':
Alert::error('Error Message', 'Optional Title');
break;
case 'warning':
Alert::warning('Warning Message', 'Optional Title');
break;
default:
Alert::message('Robots are working!');
break;
}
return view('SweetAlert');
}
还不快抢沙发