甜蜜警报炸弹框架的基本使用教程

前言

最近太忙了。项目使用的子弹盒老板太丑了。让我们优化一下。我在网上搜了一下，找到了sweetalert子弹盒，挺好看的。因此，我尝试将sweetalert应用于该项目。我在给项目介绍sweetalert的时候，遇到了很多问题，但是凭借我不懈的坚持，都解决了，取得了成效。具体用法请见下文。有问题请留言，我会及时修改。

首先，下载文件

npm安装angular-sweetalert

npm安装sweetalert

npm下载angular-sweetalert时，会下载sweetalert，但只能使用sweetalert中的css。js必须通过npm下载sweetalert，并导入下载的sweetalert.min.js

二、版本描述

Angular v 1 . 2 . 30 Angular-Sweet Talert v 1 . 0 . 4 Sweet Talert v 2 . 1 . 0由于我们项目中使用的Angular版本较低，相应下载的Angular-Sweet Talert版本也较低。

注意版本。如果angular-sweetalert的版本太高，则从属文件angular的版本太低，这将导致错误报告。

第三，引进文件

sweet alert/sweet alert . min . CSS angular/angular . min . js angular-sweet alert/sweet alert . min . js sweet alert/sweet alert . min . js Note 3360在app中添加依赖模块“oitozero.ngSweetAlert”

四.使用

1.基本用法

Swal('操作前请选择数据')；

2.确认提示框

Swal({ title: '提交'，text: '确定要提交'，Icon : '信息'，Buttons 3360 { Cancel 3360 True，Confirm : '确认' })效果：

3.提示成功信息

Swal('提交'，'提交成功'，'成功')；效果：

4.错误消息提示

swal(‘删除’‘删除成功’‘错误’)；效果：

5.弹出警告信息，“确认”按钮有功能

效果：

swar({标题：“批准”，文本：“确定通过批准”，图标：“警告”，按钮： {取消：“取消”，确认：“确定”)})。然后(function(is confirm){ if(is confirm){ httpservice。post ('/bill/add '，{billno: $ scope。内容。statementbillno，systemNo: 'clearingservice '，approvalNo: 'cs001 '，userId: username，shop no : $ scope . content . storeid }，函数(数据){ if(数据){ commonservice . state . go(' clearing service . statements . list ')；} }，config . system info . approval)；}else{ swal ('cancel '，' no approval '，' error ')；}});效果：

单击“取消”在else中执行该方法

单击确定直接执行该功能

五.相关问题

1.传递函数时出错

Swal(“你确定要提交吗？”，function () {}，' error ')；//这个写法在我的版本里是错误的。我的版本支持then()，但不支持直接在参数中编写方法

2.原料药问题

在这个版本中，下面的写法只能达到标题和文字的效果，其他属性没有效果

Swal({ title: '确定要删除吗？'，text:“您将无法还原此虚拟文件！”，键入： '警告'，showcancelbutton3360 true，confirm buttoncolor : ' # dd6b 55 '，confirmbuttontext: '确认删除！'，closeonconfirm: false }，function () {swal ('delete！'您的虚拟文件已被删除。‘成功’)；});这个版本只能按照上面的列表来实现，我在官方英文文档里找到的，但是中文文档太坑了。

正式文件：https://sweetalert.js.org/docs/

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。