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 相关文章推荐
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
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
解决GD中文乱码问题
2007/02/14 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
3种php生成唯一id的方法
2015/11/23 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python Paramiko使用示例
2020/09/21 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
旷课检讨书
2015/01/26 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python