Laravel中使用SweetAlert美化提示框Alert

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

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.com

Second step

通过Composer拉入包。

composer require uxweb/sweet-alert

1.PNG

注:这里因为使用的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

2.PNG

The third step

创建控制器视图文件测试

$ php artisan make:controller SweetAlertDemo

3.PNG

4.PNG

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

5.PNG

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

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

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>

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>

字段必须存在

   @include('sweet::alert')

The fourth step

编辑路由

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

8.PNG

测试效果

9.PNG

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

官网

http://mishengqiang.com/sweetalert/


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

还不快抢沙发

添加新评论

召唤看板娘