SweetAlert2
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>
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), 则显示一个取消的对话框, 标题为'操作已取消!',文本内容为'你的文件保持原样.', 并且图标为蓝色的感叹号.
4. 自定义HTML
可以通过html参数来包含自定义的HTML内容.
Swal.fire({title: 'HTML <small>标题</small>!', // 对话框的标题, 支持HTMLhtml: '你可以在这里<b>使用 HTML</b>.', // 对话框的主要内容, 支持HTMLicon: 'info', // 对话框的图标类型, 'info' 表示信息图标showCloseButton: true, // 显示右上角的关闭按钮showCancelButton: true, // 显示取消按钮focusConfirm: false, // 默认不聚焦到确认按钮上(即不自动选择确认按钮)confirmButtonText: '<i class="fa fa-thumbs-up">很棒!</i> ', // 自定义确认按钮的文本和HTMLcancelButtonText: '<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>!', // 对话框的标题, 支持HTMLhtml: '你可以在这里<b>使用 HTML</b>.', // 对话框的主要内容, 支持HTMLicon: 'info', // 对话框的图标类型, 'info' 表示信息图标showCloseButton: true, // 显示右上角的关闭按钮showCancelButton: true, // 显示取消按钮focusConfirm: false, // 默认不聚焦到确认按钮上(即不自动选择确认按钮)confirmButtonText: '<i class="fa fa-thumbs-up"></i> 向上的拇指!', // 自定义确认按钮的文本和HTMLcancelButtonText: '<i class="fa fa-thumbs-down"></i> 向下的拇指' // 自定义取消按钮的文本和HTML});
</script>
</html>
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>
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);
});
相关文章：
SweetAlert2
1. SweetAlert2 SweetAlert2是一个基于JavaScript的库, 用于在网页上替换标准的警告框(alert), 确认框(confirm)和提示框(prompt), 并提供更加美观和用户友好的界面.需要在项目中引入SweetAlert2, 可以通过CDN链接或者将库文件下载到你的项目中来实现这一点. 通过CDN引入:<…...
c语言中比较特殊的输入函数
目录 一.getchar()函数 1.基本功能 2.使用方法 (1).读取单个字符 (2).读取多个字符（直到遇到换行符） (3).处理输入中的空白字符 3.返回值 4.应用场景 5.注意事项 二.fgets()函数 1.函数原型 2.工作原理 3.使用示例 (1).从标准输入读取一行…...
Java版自动化测试之Selenium
1. 准备 编程语言：Java JDK版本：17 Maven版本：3.6.1 2. 开始 声明：本次只测试Java的Selenium自动化功能 本次示例过程：打开谷歌游览器，进入目标网址，找到网页的输入框元素，输入指…...
【计算机网络】——计算机网络的性能指标
速率（speed） 连接在计算机网络上的主机在数字信道上传送数据的速率。 影响条件： 带宽（band width） 指在固定的时间可传输的资料数量 单位：bps或HZ 吞吐量（throughtput） 指对网络、…...
MongoDB数据类型介绍
MongoDB作为一种高性能、开源、无模式的文档型数据库，支持丰富的数据类型，以满足各种复杂的数据存储需求。本文将详细介绍MongoDB支持的主要数据类型，包括数值类型、字符串类型、日期和时间类型、布尔类型、二进制类型、数组、对象以及其他扩…...
【SpringBoot】SpringBoot 中 Bean 管理和拦截器的使用
目录 1.Bean管理 1.1 自定义Bean对象 1.2 Bean的作用域和生命周期 2.拦截器的使用 1.Bean管理 默认情况下，Spring项目启动时，会把我们常用的Bean都创建好放在IOC容器中，但是有时候我们自定义的类需要手动配置bean，这里主要介绍…...
Spring IoCDI（中）--IoC的进步
通过上文的讲解和学习, 我们已经知道了Spring IoC 和DI的基本操作, 接下来我们来系统的学习Spring IoC和DI 的操作. 前⾯我们提到IoC控制反转，就是将对象的控制权交给Spring的IOC容器，由IOC容器创建及管理对 象，也就是bean的存储。 1. Bean的…...
读软件开发安全之道：概念、设计与实施02经典原则
1. CIA原则 1.1. 软件安全都构建在信息安全的三大基本原则之上，即机密性(confidentiality)、完整性(integrity)和可用性(availability) 1.2. 双方交换的数据 1.2.1. 从技术上看，端点之间的数据交换本身就会削弱交互的机密性 1.2.2. 隐藏通信数据量的一…...
MySQL中处理JSON数据：大数据分析的新方向，详解与示例
文章目录 1. MySQL中的JSON数据类型2. JSON函数和运算符3. 创建JSON列的表4. 插入JSON数据5. 查询JSON数据6. 复杂查询和聚合7. JSON 数据的索引8. 总结 在当今的大数据时代，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式&a…...
【图形学】TA之路-矩阵
在 Unity 中，矩阵广泛用于处理各种图形变换，例如平移、旋转、缩放等。矩阵的使用不仅限于三维空间，还可以应用于二维空间的操作。了解矩阵及其运算对于游戏开发和计算机图形学非常重要。Unity 中使用的是行向量不是列向量，这个要注…...
LAMM: Label Alignment for Multi-Modal Prompt Learning
系列论文研读目录 文章目录 系列论文研读目录文章题目含义AbstractIntroductionRelated WorkVision Language ModelsPrompt Learning MethodologyPreliminaries of CLIPLabel AlignmentHierarchical Loss 分层损失Parameter Space 参数空间Feature Space 特征空间Logits Space …...
mac编译opencv 通用架构库的记录
1,通用架构 (x86_64;arm64）要设置的配置项： CPU_BASELINE CPU_DISPATCH 上面这两个我设置成SSE_3，其他选项未尝试，比如不设置。 CMAKE_OSX_ARCHITECTURES:x86_64;arm64 WITH_IPP:不勾选 2,contrib库的添加： 第一次…...
Python 向IP地址发送字符串
Python 向IP地址发送字符串 在网络编程中，使得不同设备间能够进行数据传输是一项基本任务。Python提供了强大的库，帮助开发者轻松地实现这种通信。本文将介绍如何使用Python通过UDP协议向特定的IP地址发送字符串信息。 UDP协议简介 UDP（用…...
上升响应式Web设计：纯HTML和CSS的实现技巧-1
响应式Web设计（Responsive Web Design, RWD）是一种旨在确保网站在不同设备和屏幕尺寸下都能良好运行的网页设计策略。通过纯HTML和CSS实现响应式设计，主要依赖于媒体查询（Media Queries）、灵活的布局、可伸缩的图片和字…...
利用java结合python实现gis在线绘图,主要技术java+python+matlab+idw+Kriging
主要技术javapythonmatlabidwKriging** GIS中的等值面和等高线绘图主要用于表达连续空间数据的分布情况，特别适用于需要展示三维空间中某个变量随位置变化的应用场景。 具体来说，以下是一些适合使用GIS等值面和等高线绘图的场景： 地形与地貌…...
Android全面解析之context机制（三）： 从源码角度分析context创建流程（下）
前言 前面已经讲了什么是context以及从源码角度分析context创建流程（上）。限于篇幅把四大组件中的广播和内容提供器的context获取流程放在了这篇文章。广播和内容提供器并不是context家族里的一员，所以他们本身并不是context，因而…...
执行docker compose命令出现 Additional property include is not allowed
问题背景 在由docker-compose.yml的文件目录下执行命令 docker compose up -d 出现错误 Additional ininoperty include is not allowed 原因 我的docker-compose.yml 文件中出现了include标签旧版本的docker-compose 不支持此标签 解决办法 下载支持的docker-compose 解决…...
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…...
ubuntu2204-中文输入法-pycharm-python-django开发环境搭建
文章目录 1.系统常用设置1.1.安装中文输入法1.2.配置输入法1.3.卸载输入法1.4.配置镜像源2.java安装3.pycharm安装与启动4.卸载ubuntu2204默认版本5.安装Anaconda5.1.安装软件依赖包5.2.安装命令5.3.激活安装5.4.常用命令5.5.修改默认启动源6.安装mysql6.1.离线安装mysql6.2.在…...
【学习笔记】Matlab和python双语言的学习(一元线性回归）
文章目录 前言一、一元线性回归回归分析的一般步骤一元线性回归的基本形式回归方程参数的最小二乘法估计对回归方程的各种检验估计标准误差的计算回归直线的拟合优度判定系数显著性检验 二、示例三、代码实现----Matlab四、代码实现----python回归系数的置信区间公式残差的置信…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
微信小程序之bind和catch
这两个呢，都是绑定事件用的，具体使用有些小区别。 官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...
day52 ResNet18 CBAM
在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）
CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。 如果乘法先执行，结果是17。如果5…...