Laravel中使用SweetAlert美化提示框Alert

最新推荐文章于 2021-03-22 13:19:05 发布

fmujie

最新推荐文章于 2021-03-22 13:19:05 发布

阅读量1k

点赞数 1

文章标签： laravel

本文链接：https://blog.csdn.net/weixin_44396894/article/details/103648004

版权

Laravel中使用SweetAlert美化提示框Alert

个人博客 https://blog.fmujie.cn/

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

在这里插入图片描述

注：这里因为使用的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');
    }

  Alert::message('Robots are working!');
                break;
        }
        return view('SweetAlert');
    }

官网

http://mishengqiang.com/sweetalert/

点此跳转

fmujie

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Laravel中使用SweetAlert美化提示框Alert

Laravel中使用SweetAlert美化提示框AlertThe first step使用composer安装Laravel到www目录下（这里以laravle5.6为例）composer create-project --prefer-dist laravel/laravel blog 5.6.*若没有配置中国全量镜像则先配置镜像（当前项目推荐配置全局镜像）composer c...
复制链接

扫一扫