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 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
axios基本入门用法教程
Mar 25 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
JS实现简易图片自动轮播
Oct 16 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函数重载的替代方法--伪重载详解
2015/05/08 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
Python CSV模块使用实例
2015/04/09 Python
python动态视频下载器的实现方法
2019/09/16 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Python 列表反转显示的四种方法
2020/11/16 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
中学校庆方案
2014/03/17 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
银行求职信范文
2014/05/26 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
Golang bufio详细讲解
2022/04/21 Golang