sweetalert2弹窗--Dcat-Admin框架实战(一)

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）代码讲解

源码：

  1.  
    <?php
  2.  
     
  3.  
    namespace App\ Admin\ Controllers;
  4.  
     
  5.  
    use Dcat\ Admin\ Admin;
  6.  
    use Dcat\ Admin\ Layout\ Content;
  7.  
    use Dcat\ Admin\ Layout\ Row;
  8.  
    use Dcat\ Admin\ Http\ Controllers\ AdminController;
  9.  
     
  10.  
    class Sweetalert2Controller extends AdminController
  11.  
    {
  12.  
           public function index(Content $content){
  13.  
                  $content->row( function (Row $row){
  14.  
                              Admin::script(
  15.  
                                  <<<JS
  16.  
    $('.loading-2').click(function(){
  17.  
           Dcat.swal.fire('有猫彬 最爱写代码');
  18.  
    });
  19.  
    JS
  20.  
                              );
  21.  
                  $row->column( 4, <<<HTML
  22.  
    <br class="mb-2">
  23.  
    <div>
  24.  
        <a href="#" class="loading-2">谁最可爱</a>
  25.  
    </div>
  26.  
    HTML
  27.  
                         );
  28.  
                  });
  29.  
                  return $content->header( $this->title());
  30.  
           }
  31.  
    }

（2）样例使用方法

①在浏览器输入访问地址http://127.0.0.1:8000/admin/sweetalert2shows

②点击左侧按钮【谁最可爱】，就会出现sweetalert2弹窗。

（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

（3）弹窗样式

2、带message的弹窗

sweetalert2弹窗的关键语句是：

  1.  
           Dcat.swal.fire(
  2.  
                  '有猫彬 最爱写代码',
  3.  
                  '我是message,这是真的么？');

3、带icon小图标的弹窗

（1）带“问号”小图标的弹窗

sweetalert2弹窗的关键语句是：

  1.  
           Dcat.swal.fire(
  2.  
                  '有猫彬 最爱写代码',
  3.  
                  '我是message,这是真的么？',
  4.  
                  'question');

（2）带“错号”小图标的弹窗

sweetalert2弹窗的关键语句是：

  1.  
           Dcat.swal.fire(
  2.  
                  '有猫彬 最爱写代码',
  3.  
                  '不，有猫彬只爱吃冰淇淋！',
  4.  
                  'error');

（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）

（3）带“感叹号”小图标的弹窗

sweetalert2弹窗的关键语句是：

  1.  
           Dcat.swal.fire(
  2.  
                  '有猫彬 最爱写代码',
  3.  
                  '嘘！不要说话，小心影响有猫彬的写码思路',
  4.  
                  'warning');

（4）带“信息号”小图标的弹窗

sweetalert2弹窗的关键语句是：

  1.  
           Dcat.swal.fire(
  2.  
                  '有猫彬 最爱写代码',
  3.  
                  '尤其是在深夜，喜欢配着绿茶、红茶、青梅酒写代码。',
  4.  
                  'info');

（5）带“对号”小图标的弹窗

sweetalert2弹窗的关键语句是：

  1.  
           Dcat.swal.fire(
  2.  
                  '有猫彬 最爱写代码',
  3.  
                  '对，代码就是生命',
  4.  
                  'success');

4、带跳转链接的弹窗

一个弹窗还能实现网页跳转，真是神奇啊~

sweetalert2弹窗的关键语句是：

  1.  
    /*（更多博文，欢迎来我的博客学习交流https://blog.csdn.net/have_a_cat）*/
  2.  
           Dcat.swal.fire(
  3.  
                  {title: '有猫彬 最爱写代码',
  4.  
                  text: '对，代码就是生命',
  5.  
                  icon: 'success',
  6.  
                  footer: '<a href="https://blog.csdn.net/have_a_cat?spm=1010.2135.3001.5421">从哪里能学到更多知识？</a>'});

5、带图片的弹窗

sweetalert2弹窗的关键语句是：

  1.  
           Dcat.swal.fire(
  2.  
                  {imageUrl: 'https://placeholder.pics/svg/300x1500',
  3.  
                  imageHeight: 1500,
  4.  
                  imageAlt: 'A tall image'});

 

结语

感觉以上日常开发也基本够用了，还有更多（大约10多种吧）可以从官网学习。

posted @ 2022-03-05 15:27  诗人谈远方  阅读(962)  评论(0)    收藏  举报