Angular中sweetalert弹框的基本使用教程


Posted in Javascript onJuly 22, 2018

前言

最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了。所以我就想办法将sweetalert用到项目中,在项目中引入sweetalert时,遇到诸多问题,但最终在我不懈坚持下,都解决了,实现了效果。具体用法请看下文。写的有问题的地方欢迎留言,我会及时更改。

一、下载文件

npm install angular-sweetalert

npm install sweetalert

当npm 下载angular-sweetalert时,会附带下载sweetalert,但是只能用sweetalert中的css,js必须通过npm下载sweetalert,引入下载的sweetalert.min.js

二、版本说明

  • Angular V1.2.30
  • Angular-sweetalert V1.0.4
  • Sweetalert V2.1.0

因为我们项目使用的angular版本较低,所以相对应下载的angular-sweetalert版本也低。

一定要注意版本,如果angular-sweetalert版本过高,所依赖的文件angular版本过低,会导致引入报错。

三、引入文件

  • sweetalert/sweetalert.min.css
  • angular/angular.min.js
  • angular-sweetalert/SweetAlert.min.js
  • sweetalert/sweetalert.min.js

注意:在app中添加依赖模块‘oitozero.ngSweetAlert'

四、使用方法

1、基础用法

swal("请选中数据再进行操作");

Angular中sweetalert弹框的基本使用教程

2、确认提示框

swal({
   title: "提交",
   text: "确定提交吗",
   icon: 'info',
   buttons: {
    cancel: true,
    confirm: "Confirm"
   }
  })

效果:

Angular中sweetalert弹框的基本使用教程

3、成功信息提示

swal("提交", "提交成功成功", 'success');

效果:

Angular中sweetalert弹框的基本使用教程

4、错误信息提示

swal("删除", "删除成功", 'error');

效果:

Angular中sweetalert弹框的基本使用教程

5、警告信息弹窗,“确认”按钮带有一个函数

效果:

swal({
 title: "审批",
 text: "确定通过审批吗",
 icon: 'warning',
 buttons: {
  cancel: "取消",
  confirm: "确定"
 }
}).then(function(isConfirm){
 if(isConfirm){
  httpService.post('/bill/add', {
   billNo: $scope.content.statementBillno,
   systemNo: 'clearingservice',
   approvalNo: 'cs001',
   userId: username,
   shopNo: $scope.content.storeId
  }, function(data) {
   if(data) {
   commonService.state.go("clearingservice.statements.list");
   }
  }, config.systemInfo.approval);
 }else{
  swal("取消","没有审批",'error');
 }

});

效果:

Angular中sweetalert弹框的基本使用教程

点击取消执行else中的方法

Angular中sweetalert弹框的基本使用教程

点击确定直接执行函数

Angular中sweetalert弹框的基本使用教程

五、相关问题

1、传函数错误

Swal(“确定提交吗”, function(){}, ‘error'); //这种写法在我用的这个版本中是错误的,我的这个版本支持then(), 不支持直接在参数中写方法

2、API问题

在这个版本中以下写法只能实现title和text的效果,其他属性都不起作用

swal({
  title: "确定删除吗?",
  text: "你将无法恢复该虚拟文件!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "确定删除!",
  closeOnConfirm: false
 },
 function(){
  swal("删除!", "你的虚拟文件已经被删除。", "success");
 });

在这个版本中只能按照我最上面所列举的去实现,那是我在官方英文文档中发现的,中文文档太坑了。

官方文档:https://sweetalert.js.org/docs/

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
超级退弹代码
Jul 07 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
JavaScript 继承使用分析
May 12 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
5分钟学会Vue动画效果(小结)
Jul 21 #Javascript
详解从Vue-router到html5的pushState
Jul 21 #Javascript
JS实现面向对象继承的5种方式分析
Jul 21 #Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 #Javascript
vue项目中添加单元测试的方法
Jul 21 #Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 #Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
You might like
c#中的实现php中的preg_replace
2009/12/21 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
js传值 判断
2006/10/26 Javascript
分享别人写的一个小型js框架
2007/08/13 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
详谈python read readline readlines的区别
2017/09/22 Python
python判断数字是否是超级素数幂
2018/09/27 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
建筑专业自荐信范文
2014/01/05 职场文书
管理失职检讨书
2014/02/12 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
服装店营销方案
2014/03/10 职场文书
租赁协议书范本
2014/04/22 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
中秋节感想
2015/08/10 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python