SweetAlert2

news2024/11/16 7:25:18

1. SweetAlert2

SweetAlert2是一个基于JavaScript的库, 
用于在网页上替换标准的警告框(alert), 确认框(confirm)和提示框(prompt), 并提供更加美观和用户友好的界面.

需要在项目中引入SweetAlert2, 可以通过CDN链接或者将库文件下载到你的项目中来实现这一点. 通过CDN引入:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.css">  
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.js"></script>

2. 警告框(Alert)

Swal.fire()是SweetAlert2库中用于显示对话框(如警告框, 确认框, 成功提示等)的主要方法.

// 使用模板
Swal.fire(  
  '标题',  
  '这是一条警告信息！',  
  'warning'  
);

这段代码做了以下几件事情:
* 1. 触发SweetAlert2对话框: 通过调用Swal.fire()方法, 告诉SweetAlert2要显示一个对话框.
* 2. 设置对话框的标题: 第一个参数'标题'是对话框的标题文本.
     在这个例子中, 它简单地显示为'标题'. 可以根据需要更改这个文本, 以反映对话框的目的或内容.
* 3. 设置对话框的内容: 第二个参数'这是一条警告信息!'是对话框的主体内容. 它向用户提供了关于对话框目的的更多信息.
     在这个例子中, 它是一条警告信息, 可以根据需要显示任何文本或HTML内容.
* 4. 设置对话框的图标和类型: 第三个参数'warning'指定了对话框的图标类型和基本的样式.
     在这个例子中, 它设置为'warning', 这意味着对话框将显示一个警告图标(通常是黄色或橙色的感叹号),
     并且整个对话框的样式将反映警告的氛围.
     SweetAlert2支持多种类型的图标, 包括'success', 'error', 'info', 'warning'和'question', 以及自定义图标.

当这段代码执行时, 它会在页面上显示一个包含指定标题, 内容和图标的SweetAlert2对话框.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert2 </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.js"></script>
</head>
<body>
</body>
<script>
    Swal.fire(
        '标题',
        '这是一条警告信息！',
        'warning'
    );
</script>
</html>

image-20240817203014295

GIF 2024-8-17 21-15-14

3. 确认框(Confirm)

下面使用SweetAlert2库来显示一个具有确认和取消按钮的警告对话框, 并根据用户的响应来显示不同的结果.

// 使用模板
Swal.fire({
    title: '你确定吗?',  // 设置对话框的标题
    text: "你将无法撤销此操作！",  // 设置对话框的文本内容
    icon: 'warning',  // 设置对话框的图标类型为警告

    confirmButtonColor: '#3085d6',  // 设置确认按钮的颜色
    confirmButtonText: '是的, 我确定！',  // 自定义确认按钮的文本

    showCancelButton: true,  // 显示取消按钮
    cancelButtonColor: '#d33',  // 设置取消按钮的颜色
    cancelButtonText: '取消'  // 自定义取消按钮的文本

}).then((result) => {
    // 当用户点击确认或取消按钮后, 会执行这个回调函数
    // result 对象包含了用户的响应信息
    if (result.isConfirmed) {
        // 如果用户点击了确认按钮
        // 显示一个成功的对话框
        Swal.fire(
            '操作成功！',
            '你的文件已被删除。',
            'success'
        );
    } else if (result.isDismissed) {
        // 用户通过点击取消按钮, 关闭按钮, 点击弹窗外的区域等方式关闭了对话框
        Swal.fire(
            '操作已取消',
            '你的文件保持原样。',
            'info'
        );
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert2 </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.js"></script>
</head>
<body>
</body>
<script>
    Swal.fire({
        title: '你确定吗?',  // 设置对话框的标题
        text: "你将无法撤销此操作！",  // 设置对话框的文本内容
        icon: 'warning',  // 设置对话框的图标类型为警告

        confirmButtonColor: '#3085d6',  // 设置确认按钮的颜色
        confirmButtonText: '是的, 我确定！',  // 自定义确认按钮的文本

        showCancelButton: true,  // 显示取消按钮
        cancelButtonColor: '#d33',  // 设置取消按钮的颜色
        cancelButtonText: '取消'  // 自定义取消按钮的文本

    }).then((result) => {
        // 当用户点击确认或取消按钮后, 会执行这个回调函数
        // result 对象包含了用户的响应信息
        if (result.isConfirmed) {
            // 如果用户点击了确认按钮  
            // 显示一个成功的对话框
            Swal.fire(
                '操作成功！',
                '你的文件已被删除。',
                'success'
            );
        } else if (result.isDismissed) {
            // 用户通过点击取消按钮, 关闭按钮, 点击弹窗外的区域等方式关闭了对话框
            Swal.fire(
                '操作已取消',
                '你的文件保持原样。',
                'info'
            );
        }
    });
</script>
</html>

这段代码的执行流程如下:
* 调用Swal.fire()方法显示一个具有警告图标的确认对话框, 对话框的标题是'你确定吗?', 
  文本内容是'你将无法撤销此操作!', 并且提供了确认和取消两个按钮.
* 用户看到对话框后, 可以选择点击'是的, 我确定!'按钮来确认操作, 或者点击'取消'按钮来取消操作.
* 当用户点击任意一个按钮后, Swal.fire()方法会返回一个Promise对象,
  该对象在解析(resolve)时会传递一个result对象给.then()方法中的回调函数.
* 在回调函数内部, 通过检查result.isConfirmed的值来确定用户是否点击了确认按钮.
  如果用户点击了确认按钮(result.isConfirmed为true), 则显示一个成功的对话框, 标题为'操作成功!',
  文本内容为'你的文件已被删除.', 并且图标为成功图标(默认为绿色的勾号).
* 如果用户点击了取消按钮或关闭了对话框(result.isDismissed为true), 
  则显示一个取消的对话框, 标题为'操作已取消!',
  文本内容为'你的文件保持原样.', 并且图标为蓝色的感叹号.

image-20240817211224076

GIF 2024-8-17 21-13-04

4. 自定义HTML

可以通过html参数来包含自定义的HTML内容.

Swal.fire({
    title: 'HTML <small>标题</small>!',  // 对话框的标题, 支持HTML
    html: '你可以在这里<b>使用 HTML</b>.',  // 对话框的主要内容, 支持HTML
    icon: 'info',  // 对话框的图标类型, 'info' 表示信息图标
    showCloseButton: true,  // 显示右上角的关闭按钮
    showCancelButton: true,  // 显示取消按钮
    focusConfirm: false,  // 默认不聚焦到确认按钮上(即不自动选择确认按钮)
    confirmButtonText: '<i class="fa fa-thumbs-up">很棒!</i> ',  // 自定义确认按钮的文本和HTML
    cancelButtonText: '<i class="fa fa-thumbs-down">取消</i>'  // 自定义取消按钮的文本和HTML
});

下面是对这段代码的详细解释:
* title: 这是对话框的标题, 支持HTML标签.
  在这个例子中, 标题包含了一个<small>标签, 用于显示较小的文本.
* html: 这个选项允许你在对话框的主体部分插入HTML内容.
  在这个例子中, 主体内容包含了一个<b>标签来加粗文本, 展示了SweetAlert2如何支持富文本内容.
* icon: 这个选项用于设置对话框的图标类型.
  在这个例子中, 它被设置为'info', 表示这是一个信息类型的对话框, 并且会显示一个蓝色的信息图标.
* showCloseButton: 这个选项用于控制是否在对话框的右上角显示一个关闭按钮.
  在这个例子中, 它被设置为true, 表示显示关闭按钮.
* showCancelButton: 这个选项用于控制是否显示取消按钮.
  在这个例子中, 它被设置为true, 表示显示取消按钮.
* focusConfirm: 这个选项用于控制对话框打开时是否自动聚焦到确认按钮上.
  在这个例子中, 它被设置为false, 表示不自动聚焦到确认按钮.
* confirmButtonText: 这个选项用于自定义确认按钮的文本.
  在这个例子中, 它包含了HTML内容, 包括一个FontAwesome的<i>标签来显示一个向上的拇指, 以及自定义的文本'向上的拇指!'.
* cancelButtonText: 这个选项用于自定义取消按钮的文本.
  在这个例子中, 它包含了HTML内容, 包括一个FontAwesome的<i>标签来显示一个向下的拇指, 以及自定义的文本'向选的拇指!'.

需要注意的是, 为了使用FontAwesome图标(如<i class="fa fa-thumbs-up"></i>和<i class="fa fa-thumbs-down"></i>).
需要在网页中引入FontAwesome库. 否则, 这些图标将不会显示. FontAwesome 5.x 通过CDN引入:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert2 </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
</body>
<script>
    Swal.fire({
        title: 'HTML <small>标题</small>!',  // 对话框的标题, 支持HTML
        html: '你可以在这里<b>使用 HTML</b>.',  // 对话框的主要内容, 支持HTML
        icon: 'info',  // 对话框的图标类型, 'info' 表示信息图标
        showCloseButton: true,  // 显示右上角的关闭按钮
        showCancelButton: true,  // 显示取消按钮
        focusConfirm: false,  // 默认不聚焦到确认按钮上(即不自动选择确认按钮)
        confirmButtonText: '<i class="fa fa-thumbs-up"></i> 向上的拇指!',  // 自定义确认按钮的文本和HTML
        cancelButtonText: '<i class="fa fa-thumbs-down"></i> 向下的拇指'  // 自定义取消按钮的文本和HTML
    });
</script>
</html>

image-20240817213330535

GIF 2024-8-17 21-32-48

5. 带有计时器的提示框

设置一个自动关闭的计时器.

Swal.fire({    
  title: '自动关闭',  // 对话框的标题  
  text: '我会在 2 秒后关闭！',  // 对话框的文本内容  
  timer: 2000,        // 设置自动关闭的计时器, 单位为毫秒(这里是2000毫秒, 即2秒)  
  showConfirmButton: false  // 不显示确认按钮  
});

面是对这段代码的详细解释:
* title: 这是对话框的标题, 在这个例子中显示为'自动关闭'.
* text: 这是对话框的文本内容, 向用户展示额外的信息.
  在这个例子中, 文本内容是'我会在2秒后关闭!', 告诉用户对话框将在2秒后自动关闭.
* timer: 这个选项用于设置对话框自动关闭的计时器. 单位是毫秒(1秒 = 1000毫秒).
  在这个例子中, 它被设置为2000毫秒, 即2秒后对话框将自动关闭.
* showConfirmButton: 这个选项用于控制是否显示确认按钮.
  在这个例子中, 它被设置为false, 表示不显示确认按钮. 由于对话框将自动关闭, 因此通常不需要显示确认按钮.
* 当这段代码执行时, 它会在页面上显示一个包含指定标题和文本内容的SweetAlert2对话框.
  由于设置了timer为2000毫秒, 并且showConfirmButton被设置为false,
  因此对话框将在显示2秒后自动关闭, 而不会等待用户点击任何按钮.
  这种自动关闭的对话框通常用于向用户展示一些临时信息或通知, 而不需要用户进行任何交互.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert2 </title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.5/dist/sweetalert2.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
</body>
<script>
    Swal.fire({
        title: '自动关闭',  // 对话框的标题  
        text: '我会在 2 秒后关闭！',  // 对话框的文本内容  
        timer: 2000,        // 设置自动关闭的计时器，单位为毫秒（这里是2000毫秒，即2秒）  
        showConfirmButton: false  // 不显示确认按钮  
    });
</script>
</html>

GIF 2024-8-17 21-39-33

6. Promise接口

SweetAlert2会返回一个Promise对象, 这允许使用.then()和.catch()方法来处理用户的操作.

Swal.fire({  
  // 配置项...  
}).then((result) => {  
  if (result.isConfirmed) {  
    // 用户点击了确认  
  } else if (result.isDenied) {  
    // 用户点击了取消（如果配置了取消按钮）  
  } else if (result.isDismissed) {  
    // 用户关闭了弹窗（点击了关闭按钮、点击了弹窗外的区域等）  
    // result.dismiss 可以是 'overlay', 'cancel', 'close', 'esc', 'timer'  
  }  
}).catch(error => {  
  // 处理可能出现的错误  
  console.error(error);  
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2049708.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++：stack类（vector和list优缺点、deque）

C++：stack类（vector和list优缺点、deque）

目录 前言 数据结构 deque vector和list的优缺点 push pop top size empty 完整代码 前言 stack类就是数据结构中的栈 C数据结构&#xff1a;栈-CSDN博客 stack类所拥有的函数相比与string、vector和list类都少很多&#xff0c;这是因为栈这个数据结构是后进先出的…
阅读更多...
SPRING09_ Bean后置处理器创建过程、SmartInstantiationAwareBeanPostProcessor预测方法调用

SPRING09_ Bean后置处理器创建过程、SmartInstantiationAwareBeanPostProcessor预测方法调用

文章目录 ①. Bean后置处理器创建过程②. SmartInstantiationAwareBeanPostProcessor预测方法调用 ①. Bean后置处理器创建过程 ①. 坏境准备,在BeanPostProcessor的无参构造器、postProcessBeforeInitialization以及postProcessAfterInitialization打上断点.以xml的方式启动容…
阅读更多...
秋招突击——8/15——新作{最大子数组和、合并区间、转轮数组、除自身以外的数组的乘积}

秋招突击——8/15——新作{最大子数组和、合并区间、转轮数组、除自身以外的数组的乘积}

文章目录 引言新作最大子数组和个人实现参考实现 合并区间个人实现短板补充——自定义排序标准 参考实现 转轮数组最终实现 除自身以外数组的乘积个人实现 总结 引言 以前刷题的方式方法有问题&#xff0c;花太多时间了&#xff0c;应该先过一遍&#xff0c;然后再针对特定的题…
阅读更多...
第一百九十四节 Java集合教程 - Java优先级队列

第一百九十四节 Java集合教程 - Java优先级队列

Java集合教程 - Java优先级队列 优先级队列是其中每个元素具有相关联的优先级的队列。具有最高优先级的元素将从队列中删除。 PriorityQueue 是一个实现类对于Java Collection Framework中的无界优先级队列。 我们可以使用在每个元素中实现的 Comparable 接口作为其优先事项。…
阅读更多...
C# OnnxRuntime YoloV5 Demo

C# OnnxRuntime YoloV5 Demo

目录 效果 模型信息 项目 代码 Form1.cs YoloV5.cs 下载 效果 模型信息 Model Properties ------------------------- --------------------------------------------------------------- Inputs ------------------------- name&#xff1a;images tensor&#xff1a…
阅读更多...
机器学习/人工智能中的学习证明

机器学习/人工智能中的学习证明

一、说明 在进行任何数学发展之前&#xff0c;我们必须首先了解学习的基础以及它如何与错误的概念密切相关。关于代价函数&#xff0c;它的工作原理是梯度下降原理。本文将回顾梯度下降原理。 二、假想的厨师 想象一下&#xff0c;在任何一天&#xff0c;你决定复制你在一家著名…
阅读更多...
8.13 Day19 Windows服务器（Windows service 2008 R2）上域的搭建 （1）

8.13 Day19 Windows服务器（Windows service 2008 R2）上域的搭建 （1）

域服务器&#xff08;DC&#xff09;&#xff1a;安装了活动目录服务的服务器就称为DC。 将三台设备配置在同一网络中&#xff0c;此处将外部网络隔离开&#xff0c;只将他们放在局域网中 服务端网络配置&#xff0c;此时与外部网络彻底隔绝开&#xff0c;且已无法和主机通信&…
阅读更多...
XSS game复现(DOM型)

XSS game复现(DOM型)

目录 1.Ma Spaghet! 2.Jefff 3.Ugandan Knuckles 4.Ricardo Milos 5.Ah Thats Hawt 6.Ligma 7.Mafia 8.Ok, Boomer 1.Ma Spaghet! 通过简单的尝试发现传递参数可以直接进入h2标签 接下来我们尝试传入一个alert(1) 可以看到并没有触发。原因是在innerHTML中官方禁用了sc…
阅读更多...
二进制安装php

二进制安装php

下载php二进制包&#xff1a; 官网地址&#xff1a;https://www.php.net/releases/ PHP: Releaseshttps://www.php.net/releases/在里边可以选择自己要下载的包进行下载&#xff1b; 下载完成后进行解压&#xff1a; tar xvzf php-7.3.12.tar.gz 解压后 进入目录进行预编…
阅读更多...
xss案例

xss案例

首先进入XSS Game - Learning XSS Made Simple! | Created by PwnFunction打开环境 Ma Spaghet 在script里面给使用get传参给somdbody传一个值&#xff0c;若没有传值&#xff0c;默认传SomebodyToucha Ma Spaghet!,赋值给spaghet,放在h2标签中&#xff0c;spaghet后会有一个in…
阅读更多...
Linux根目录下的各个目录的用途介绍

Linux根目录下的各个目录的用途介绍

在Linux系统中&#xff0c;我们可以通过cd /命令进入根目录&#xff0c;然后ls -l(或者ll命令)即可查看根下目前的目录情况&#xff1a; 这些不同目录的用途说明如下&#xff1a; /bin&#xff1a;包含基本命令文件&#xff0c;如ls、cp等&#xff0c;这个文件中的文件都是可执…
阅读更多...
基于协同过滤算法的黔醉酒业白酒销售系统_p091v--论文

基于协同过滤算法的黔醉酒业白酒销售系统_p091v--论文

TOC springboot349基于协同过滤算法的黔醉酒业白酒销售系统_p091v--论文 绪论 1.1背景及意义 中国经济快速发展&#xff0c;人均GDP逐年上涨&#xff0c;非生活必须品的消费比重也随之增加 &#xff0c;酒类销售额度&#xff0c;尤其是酱香型白酒销售额近些年可谓发展迅猛&…
阅读更多...
STM32通过I2C硬件读写MPU6050

STM32通过I2C硬件读写MPU6050

目录 STM32通过I2C硬件读写MPU6050 1. STM32的I2C外设简介 2. STM32的I2C基本框图 3. STIM32硬件I2C主机发送流程 10位地址与7位地址的区别 7位主机发送的时序流程 7位主机接收的时序流程 4. STM32硬件与软件的波形对比 5. STM32配置硬件I2C外设流程 6. STM32的I2C.h…
阅读更多...
Hadoop如何搭建计算和存储节点分离

Hadoop如何搭建计算和存储节点分离

在业内存在着一种看起来比较离谱的搭建方式&#xff0c;叫计算节点与存储节点分离&#xff0c;说它比较离谱&#xff0c;是因为hadoop架构本身不直接支持将这两者分开&#xff0c;因为hadoop本身的一大优势就是计算本地化&#xff0c;这种分开搭建的方式抛弃了这种优势&#xf…
阅读更多...
Linux 软件编程学习第十五天

Linux 软件编程学习第十五天

1.TCP粘包问题&#xff1a; TCP发送数据是连续的&#xff0c;两次发送的数据可能粘连成一包被接收到 1.解决粘包问题方法&#xff1a; 1.接收指定长度&#xff1a;&#xff08;不稳定&#xff09; 发送5个字节 接收5个字节 2.睡眠&#x…
阅读更多...
用户画像实时标签数据处理流程图

用户画像实时标签数据处理流程图

背景 在用户画像中&#xff0c;有一类实时标签&#xff0c;我们既要它能够实时的对外提供数据统计&#xff0c;也要保存到大数据组件中用于后续的对数&#xff0c;圈选的逻辑&#xff0c;本文就看一下用户画像的实时标签的数据流转图 实时标签数据流转图 首先我们肯定是要使…
阅读更多...
GoMail发送邮件的性能优化策略有哪些方法？

GoMail发送邮件的性能优化策略有哪些方法？

GoMail发送邮件如何配置服务器&#xff1f;GoMail发信功能如何&#xff1f; GoMail是一款广受欢迎的Go语言邮件发送库&#xff0c;具备高效、易用等优点&#xff0c;但在高并发场景下&#xff0c;GoMail发送邮件的性能优化显得尤为重要。AokSend将探讨几种有效的GoMail发送邮件…
阅读更多...
图像数据处理14

图像数据处理14

三、空域滤波 3.3 统计排序滤波器 统计排序滤波器属于非线性空域滤波器&#xff0c;常见的统计排序滤波器有中值滤波器、最大值滤波器、最小值滤波器。 中值滤波器、最大值滤波器和最小值滤波器是三种常见的统计排序滤波器&#xff0c;它们在图像处理和信号处理中发挥着重要…
阅读更多...
WUP-MY-LABEL-PRINTER 旻佑热敏打印机标签打印uniapp插件使用说明

WUP-MY-LABEL-PRINTER 旻佑热敏打印机标签打印uniapp插件使用说明

插件地址&#xff1a;WUP-MY-LABEL-PRINTER 旻佑热敏打印机标签打印安卓库 简介 本插件主要用于旻佑热敏打印机打印标签&#xff0c;不支持票据打印。适用于旻佑的各型支持标签打印的热敏打印机。本插件开发时使用的打印机型号为MY-805嵌入式面板打印机&#xff0c;其他型号请…
阅读更多...
Cisco交换机SSH使用RSA公钥免密登录（IOS与Nexus，服务器以RHEL8为例）

Cisco交换机SSH使用RSA公钥免密登录（IOS与Nexus，服务器以RHEL8为例）

目录 需求实验步骤0. 实验环境1. Linux2. CiscoIOS基础设置保存密钥登陆测试 3. CiscoNexus基础配置保存密钥登陆测试 需求 在实际工作中&#xff0c;常会遇到自动化的需求&#xff0c;那么在自动采集、配置等对网络设备的自动化需求中&#xff0c;不可避免的会遇到需要登录-&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023