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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
javascript实现日期按月份加减
May 15 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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
php开发环境配置记录
2011/01/14 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP比你想象的好得多
2014/11/27 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
小程序实现留言板
2018/11/02 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python 全局变量的import机制介绍
2017/09/07 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python实现画圆功能
2018/01/25 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python导入坐标点的具体操作
2019/05/10 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
高三家长寄语
2014/04/03 职场文书
法人代表委托书
2014/04/04 职场文书
交通事故协议书范文
2014/04/16 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
教师旷工检讨书
2015/08/15 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL