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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
vue之nextTick全面解析
May 17 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
vue 组件高级用法实例详解
Apr 11 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
Vue实现简易计算器
2020/02/25 Javascript
python利用Guetzli批量压缩图片
2017/03/23 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
员工手册董事长致辞
2015/07/29 职场文书
值班管理制度范本
2015/08/06 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
python区块链实现简版工作量证明
2022/05/25 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript