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/

点此跳转

Laravel中使用SweetAlert美化提示框Alert相关推荐

php 怎么输出alert,php简单提示框alert封装函数
php简单提示框alert封装函数发布于 2014-11-03 16:35:27 | 89 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext Pr ...
调整idea中控制台及右侧提示框字体大小
调整idea中控制台及右侧提示框字体大小
JavaScript的三种弹出提示框(alert、confirm、prompt)
三种提示框 alert () confirm() prompt () alert () alert()方法是显示一条弹出提示消息和确认按钮的警告框. 需要注意的是 :alert()是一个阻塞的函数,如 ...
html中如何写一个提示框,html弹出公告 html中点击列表文字弹出提示框？
怎么在网页制作中给主页设置弹出公告,要CSS布局HTML小编今天和大家分享在主页打... 无标题文档 45565 把style属性加给你的弹窗标签就可以了,宽高位置均可变. 哪位前辈高手有html的窗 ...
JS的三种消息提示框alert confirm prompt
首先来看看alert的效果: 代码为: $(function(){$("#quit").click(quit); })function quit(){alert("消息提 ...
JS的三种弹出提示框(alert、confirm、prompt)
三种弹出提示框 1.alert() 2.confirm() 3.prompt() 1.alert() 方法会弹出一个警告框,只有确定按钮 alert('这是个警告框') 2.comfim() 会弹出一 ...
html中如何写一个提示框,HTML简单的提示框
由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的HTML方法. function show(obj,id) { var objDiv ...
微信小程序在加载中时如何显示提示框？
链接: 微信小程序文档wx.showLoading 使用wx.showLoading() 显示 loading 提示框.需主动调用 wx.hideLoading 才能关闭提示框在请求数据前使 ...
C# winfrom美化提示框，顶部弹出提示框
我也是借鉴了别人的写的,链接: https://blog.csdn.net/qq_38469552/article/details/114591731只是把他那个整理一下,方便日后使用第一步,先创建 ...

Laravel中使用SweetAlert美化提示框Alert

Laravel中使用SweetAlert美化提示框Alert

The first step

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

若没有配置中国全量镜像则先配置镜像（当前项目推荐配置全局镜像）

全局镜像

Second step

通过Composer拉入包。

注：这里因为使用的laravel版本>5.5不需要如下操作（config/app.php）

使用Npm安装

The third step

创建控制器视图文件测试

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

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

编写视图文件SweetAlert.blade.php

注意：css与js必须要引入

字段必须存在

The fourth step

编辑路由

测试效果

(Successful!!!)

The fifth step

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

路由

控制器函数

官网

Laravel中使用SweetAlert美化提示框Alert相关推荐

最新文章

热门文章

Laravel中使用SweetAlert美化提示框Alert

Laravel中使用SweetAlert美化提示框Alert

The first step

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

若没有配置中国全量镜像则先配置镜像（当前项目 推荐配置全局镜像）

全局镜像

Second step

通过Composer拉入包。

注：这里因为使用的laravel版本>5.5不需要如下操作（config/app.php）

使用Npm安装

The third step

创建控制器视图文件测试

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

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

编写视图文件SweetAlert.blade.php

注意：css与js必须要引入

字段必须存在

The fourth step

编辑路由

测试效果

(Successful!!!)

The fifth step

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

路由

控制器函数

官网

Laravel中使用SweetAlert美化提示框Alert相关推荐

最新文章

热门文章

若没有配置中国全量镜像则先配置镜像（当前项目推荐配置全局镜像）