SweetAlert 2 全网最详细的使用方法

最新推荐文章于 2024-02-02 12:11:49 发布
最新推荐文章于 2024-02-02 12:11:49 发布
阅读量2.7k 收藏 6
点赞数
文章标签： webpack ViewUI
原文链接：http://www.cnblogs.com/xxxxue/p/11153596.html
版权
本文详细介绍了SweetAlert2的使用方法，包括带有确定和取消按钮的弹框、展示标签内容的弹框、定位及消失时间设置、自定义第三方CSS样式、右上角通知类弹窗以及如何创建自己的通用模板。通过本文，读者可以全面掌握SweetAlert2的各种功能。
摘要由CSDN通过智能技术生成

 

官网链接

SweetAlert2 官网链接

准备阶段

CDN js
如果该 链接 时间久远了 , 可以在官网去找找最新的
可以把 js 复制出来 自己新建一个文件 然后 引用到 html 中

1. 带有 确定和取消的 弹框

Swal.fire({
    
    type: 'warning', // 弹框类型
    title: '注销帐号', //标题
    text: "注销后将无法恢复，请谨慎操作！", //显示内容            

    confirmButtonColor: '#3085d6',// 确定按钮的 颜色
    confirmButtonText: '确定',// 确定按钮的 文字
    showCancelButton: true, // 是否显示取消按钮
    cancelButtonColor: '#d33', // 取消按钮的 颜色
    cancelButtonText: "取消", // 取消按钮的 文字

    focusCancel: true, // 是否聚焦 取消按钮
    reverseButtons:
最低0.47元/天 解锁文章
dibr63585
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sweetalert2使用教程
liinux-Talk is cheap,show me the code.
05-08 1079
背景： 项目的开发中经常会遇到弹窗的问题，但是我们用到的弹窗都特别low，而且网上找了一下，发现easy-ui以及layer对应的弹窗都不是我想要的，后来发现sweetalert，发现评论还不错，所以个人尝试一下，并记录一下使用过程，便于他人借鉴。 SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，并提供5种内置的情景类，功能非常强大。 SweetAlert2是SweetAle
使用SweetAlert2创建漂亮的弹出消息
代码教主
06-19 967
有时，您将不得不向用户显示一个警告框，以使他们知道错误或通知。 浏览器提供的默认警报框的问题在于它们不是很吸引人。 当您创建具有丰富色彩组合和精美动画的网站以改善用户的浏览体验时，未设置样式的警报框似乎会不合适。 在本教程中，您将学习一个名为SweetAlert2的库，该库使我们可以创建各种警报消息，可以对其进行自定义以匹配我们自己网站的外观。 显示简单的警报消息 在向用户显示所有这些...
最新sweetalert，zip及使用教程
01-11
sweetalert是一款非常好用的前端美化弹窗组件，支持样式可调整，最新sweetalert源码及简单使用教程
sweetalert怎么在react使用
最新发布
m0_57236802的博客
02-02 195
支持大量的自定义选项，包括按钮文本、颜色、图标、动画等。你可以通过查阅的官方文档来了解所有可用的配置选项。
vue-sweetalert2：Sweetalert2的便捷包装
02-06
vue-sweetalert2 SweetAlert2的Vue.js包装器。 支持SSR。 注意： 使用“ Vue3：Composition API”时，最好不要使用此包装器。 直接调用sweetalert2更实用。 另外，最好这样做是为了更快地获得反馈，并且更接近文档。 开始吧 基本 # bash npm install -S vue-sweetalert2 将类型添加到TypeScript项目 { //...tsconfig.json "types" : [ "vue-sweetalert2" ] , } Vue 2 // main.js import Vue
vue使用sweetalert2弹窗插件
weixin_30851867的博客
07-16 1104
1). 安装 sweetalert2 npm install sweetalert2@7.15.1 --save 2). 封装 sweetalert2 在src新建plugins文件夹，然后新建vue-sweetalert2.js文件，复制贴入以下代码： src/plugins/vue-sweetalert2.js 1 import swal from 'swe...
vue 集成 sweetalert2 提示组件
Gblfy_Blog
11-02 1335
文章目录一、项目集成1. 引入方式2. 确认框封装3. 提示框封装4. 确认框使用5. 消息提示框使用6.项目效果 一、项目集成 官网链接：https://sweetalert2.github.io 案例 1. 引入方式 CDN引入方式： 在index.html中全局引入 <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> 位置： npm安装方式： npm install sw..
SweetAlert2的相关JS和CSS文件
09-02
1. `sweetalert2.min.js`：这是SweetAlert2的核心JavaScript库，压缩并优化过的版本，用于在网页中引入和使用。 2. `sweetalert2.css`：基础样式文件，定义了SweetAlert2对话框的样式和布局。 3. `sweetalert2.all....
SweetAlert2弹出消息对话框插件
01-01
SweetAlert2弹出消息对话框插件是一款含有多种情景模式的jQuery模态消息对话框代码，用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，功能非常强大。 再献上一个相关的带6...
Vue2简单的Alert组件SweetAlert启发
08-10
Vue2简单的Alert组件（SweetAlert启发）
VVue 2简单警报组件（受SweetAlert启发）-JavaScript开发
05-26
vvue2-simplert Vue 2简单警报组件（受SweetAlert启发）Vue2-Simplert现在作为Vue.js插件检查：https://github.com/mazipan/vue2-simplert-plugin演示https：// mazipan。 vvue2-simplert Vue 2简单警报组件（受SweetAlert启发）Vue2-Simplert现在作为Vue.js插件检查：https://github.com/mazipan/vue2-simplert-plugin演示https://mazipan.github.io / vue2-simplert /文档请参阅GitBook中的文档：https://vue2-simplert.gitbook.io下载使用指南方法和道具示例代码文章FAQ SweetAlert提供的FAQ图标如果您想贡献，请前往贡献指南。 在里面你会发现可怕的
ngx-sweetalert2：声明式，React式和模板驱动的SweetAlert2集成，用于Angular
01-31
@ sweetalert2 / ngx-sweetalert2 Angular的官方集成 这不是SweetAlert的常规API包装器（已经单独运行很好），它打算在其之上提供Angular式的实用程序。 :backhand_index_pointing_right: 版本9已发布！ 要从v8....
sweetalert2.zip
12-14
你应该能找到SweetAlert2库的相关文件，包括JavaScript文件（如`sweetalert2.js`或.min.js版本）和可能的CSS文件（如`sweetalert2.css`或.min.css版本），这些文件用于在项目中引入和使用SweetAlert2。 使用Sweet...
vue 集成 sweetalert2 前端校验
Gblfy_Blog
11-02 716
文章目录1. 集成 sweetalert22. 校验工具类抽象3. 校验工具类4. 使用5. 效果图6. 后端集成 1. 集成 sweetalert2 官网：https://sweetalert2.github.io 在index.html引入 <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> 2. 校验工具类抽象 Tool = { /** * 空校验 null或""都返回true */..
vue2弹窗确认框vue-sweetalert2插件的使用
weixin_41886421的博客
03-24 712
vue2弹窗确认框vue-sweetalert2插件的使用
Vue 中如何使用 SweetAlert
学习笔记
03-24 1378
Vue 中如何使用 SweetAlert 官方说明：https://github.com/avil13/vue-sweetalert2#vue-2 一、在 package.json 添加 sweertalert2 "vue-sweetalert2": "^4.2.1" 二、然后在 main.js 中添加如下内容 // main.js import Vue from 'vue'; import VueSweetalert2 from 'vue-sweetalert2'; // If you don't n
vue右击弹框跟随鼠标位置_一个零依赖的漂亮的JavaScript弹框插件——sweetalert2
weixin_39546661的博客
11-27 418
介绍sweetalert2是一个漂亮的、响应式、可定制的替代JAVASCRIPT原生的弹出框插件。sweetalert2相比sweetalert更加强大,但它不是sweetalert的扩展，它是一个全新的插件，且支持三大流行前端框架React、Vue、Angular。Github和官网https://github.com/sweetalert2/sweetalert2https://sweetal...
SweetAlert2 （弹窗插件）
平平无奇小码农的博客
01-19 2114
1.直接运用sweetalert2 <style> .title-class { color: #fff; font-weight: 200; } </style> <script src="./js/sweetalert2.all.min.js"></script> <button class="btn2">点我看动画哦</button> <script> $btn2 = document
sweetalert使用方法
12-28
以下是使用SweetAlert的方法： 1. 首先，确保在HTML文件中引入SweetAlert的CSS和JS文件： ```html <script src="lib/sweet-alert.min.js"></script> <link rel="stylesheet" type="text/css" href="lib/sweet-alert.css"> ``` 2. 使用SweetAlert弹出提示框，可以使用以下代码： ```javascript swal("Hello, world!"); ``` 这将弹出一个简单的提示框，显示文本"Hello, world!"。 3. SweetAlert还支持自定义提示框的标题、类型、内容展示图片、确认取消按钮文本等。例如： ```javascript swal({ title: "Custom Title", text: "Custom Content", icon: "success", buttons: { cancel: "Cancel", confirm: "OK" }, closeOnClickOutside: false }).then((value) => { if (value) { // 用户点击了确认按钮 } else { // 用户点击了取消按钮 } }); ``` 这将弹出一个自定义的提示框，包含标题"Custom Title"，内容"Custom Content"，成功的图标，确认按钮文本为"OK"，取消按钮文本为"Cancel"。当用户点击确认或取消按钮时，将执行相应的回调函数。 4. SweetAlert还支持其他功能，如设置提示框的宽度、高度、背景颜色等。具体的使用方法可以参考SweetAlert的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值