小言_互联网的博客

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

587人阅读  评论(0)

sweetalert2真是太美了,单单看官方这张介绍就觉得好想学会它啊~

(上图摘自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)代码讲解

源码:


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

(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多种吧)可以从官网学习。

(官方例子库:https://sweetalert2.github.io/#examples

 

感觉最近一直在看书、写码,该丰富下活动种类了,大家休息的时候都玩儿什么呢?

                                                                                                                         ----2021年6月4日

 


转载:https://blog.csdn.net/have_a_cat/article/details/117550503
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场