Laravel中使用SweetAlert美化提示框Alert

Laravel 2019-08-21 502 次浏览 次点赞

Laravel中使用SweetAlert美化提示框Alert

The first step

使用composer安装Laravel到www目录下（这里以laravle5.6为例）

composer create-project --prefer-dist laravel/laravel blog 5.6.*
Bash
Copy
若没有配置中国全量镜像则先配置镜像（当前项目 推荐配置全局镜像）
composer config repo.packagist composer https://packagist.phpcomposer.com
Bash
Copy
全局镜像

打开命令行窗口（windows用户）或控制台（Linux、Mac 用户）并执行如下命令：

composer config -g repo.packagist composer https://packagist.phpcomposer.com
Bash
Copy

Second step

通过Composer拉入包。

composer require uxweb/sweet-alert
Bash
Copy

1.PNG

注：这里因为使用的laravel版本>5.5不需要如下操作（config/app.php）
'providers' => [
    UxWeb\SweetAlert\SweetAlertServiceProvider::class,
];

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

使用Npm安装

npm install sweetalert@^2.0 --save-dev
Bash
Copy

2.PNG

The third step

创建控制器视图文件测试

$ php artisan make:controller SweetAlertDemo
Bash
Copy

3.PNG

4.PNG

同时创建视图文件(SweetAlert.blade.php)

5.PNG

在控制器中引入Alert(use Alert;)类并写一个函数测试用

 public function index()
    {
        Alert::message('Robots are working!');
    
        return view('SweetAlert');
    }
PHP
Copy

6.PNG

编写视图文件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>
HTML
Copy

7.PNG

注意：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>
HTML
Copy

字段必须存在

   @include('sweet::alert')
HTML
Copy

The fourth step

编辑路由

Route::get('/SweetAlert', 'SweetAlertDemo@index');
PHP
Copy

8.PNG

测试效果

9.PNG

(Successful!!!)

The fifth step

根据参数查看不同类型的样式

路由

Route::get('/SweetAlert/{alertType?}', 'SweetAlertDemo@index');
PHP
Copy

控制器函数

 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');
    }
PHP
Copy

官网

http://mishengqiang.com/sweetalert/


本文由 fmujie 创作，采用 知识共享署名 3.0，可自由转载、引用，但需署名作者且注明文章出处。

还不快抢沙发

添加新评论

欢迎阅读「 Laravel中使用SweetAlert美化提示框Alert 」
召唤看板娘
followMouse
PHP