sweetalert2真是太美了,单单看官方这张介绍就觉得好想学会它啊~
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL9EFWZpWOWllZW1GZohmMMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL0YTOyMjMwATM0AjNwEjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
(上图摘自sweetalert2 官方文档https://github.com/sweetalert2/sweetalert2)
一、Dcat.confirm()函数
sweetalert2弹窗通过Dcat.confirm()函数实现
二、例子们
(有太多太多种类了,被按钮们折服了,请收下我的膝盖… …🤞)
准备
①新建一个Controller,我们这里创建/home/admin/test10/app/Admin/Controllers/Sweetalert2Controller.php
(其中,test10为我的项目名称;/home/admin/test10/为我的项目路径)
②为Sweetalert2Controller.php创建路由
在/home/admin/test10/app/Admin/rootes.php文件中添加路由(即下面这句话),以后可以通过http://127.0.0.1:8000/admin/sweetalert2shows访问。
$router->resource(' sweetalert2shows', 'Sweetalert2Controller');
③上面两处不知道如何修改的,参看:快速一键增删改查(附菜单栏添加&翻译详细解读)--Dcat-Admin框架实战(二))
1、基础版(仅有title)
(1)代码讲解
源码:
<?php
namespace App\Admin\Controllers;
use Dcat\Admin\Admin;
use Dcat\Admin\Layout\Content;
use Dcat\Admin\Layout\Row;
use Dcat\Admin\Http\Controllers\AdminController;
class Sweetalert2Controller extends AdminController
{
public function index(Content $content){
$content->row(function (Row $row){
Admin::script(
<<<JS
$('.loading-2').click(function(){
Dcat.swal.fire('有猫彬 最爱写代码');
});
JS
);
$row->column(4, <<<HTML
<br class="mb-2">
<div>
<a href="#" target="_blank" rel="external nofollow" class="loading-2">谁最可爱</a>
</div>
HTML
);
});
return $content->header($this->title());
}
}
(2)样例使用方法
①在浏览器输入访问地址http://127.0.0.1:8000/admin/sweetalert2shows
②点击左侧按钮【谁最可爱】,就会出现sweetalert2弹窗。
(更多博文,欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat)
(3)弹窗样式
2、带message的弹窗
sweetalert2弹窗的关键语句是:
Dcat.swal.fire(
'有猫彬 最爱写代码',
'我是message,这是真的么?');
sweetalert2弹窗--Dcat-Admin框架实战(十八)一、Dcat.confirm()函数二、例子们
3、带icon小图标的弹窗
(1)带“问号”小图标的弹窗
sweetalert2弹窗的关键语句是:
Dcat.swal.fire(
'有猫彬 最爱写代码',
'我是message,这是真的么?',
'question');
(2)带“错号”小图标的弹窗
sweetalert2弹窗的关键语句是:
Dcat.swal.fire(
'有猫彬 最爱写代码',
'不,有猫彬只爱吃冰淇淋!',
'error');
(更多博文,欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat)
(3)带“感叹号”小图标的弹窗
sweetalert2弹窗的关键语句是:
Dcat.swal.fire(
'有猫彬 最爱写代码',
'嘘!不要说话,小心影响有猫彬的写码思路',
'warning');
(4)带“信息号”小图标的弹窗
sweetalert2弹窗的关键语句是:
Dcat.swal.fire(
'有猫彬 最爱写代码',
'尤其是在深夜,喜欢配着绿茶、红茶、青梅酒写代码。',
'info');
(5)带“对号”小图标的弹窗
sweetalert2弹窗的关键语句是:
Dcat.swal.fire(
'有猫彬 最爱写代码',
'对,代码就是生命',
'success');
4、带跳转链接的弹窗
一个弹窗还能实现网页跳转,真是神奇啊~
sweetalert2弹窗的关键语句是:
/*(更多博文,欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat)*/
Dcat.swal.fire(
{title:'有猫彬 最爱写代码',
text:'对,代码就是生命',
icon:'success',
footer:'<a href="https://blog.csdn.net/have_a_cat?spm=1010.2135.3001.5421" target="_blank" rel="external nofollow" >从哪里能学到更多知识?</a>'});
5、带图片的弹窗
sweetalert2弹窗的关键语句是:
Dcat.swal.fire(
{imageUrl:'https://placeholder.pics/svg/300x1500',
imageHeight:1500,
imageAlt:'A tall image'});
结语
感觉以上日常开发也基本够用了,还有更多(大约10多种吧)可以从官网学习。
(官方例子库:https://sweetalert2.github.io/#examples)
感觉最近一直在看书、写码,该丰富下活动种类了,大家休息的时候都玩儿什么呢?
----2021年6月4日