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 相关文章推荐
jQuery each()小议
Mar 18 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
js Calender控件使用详解
Jan 05 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
vue自动化路由的实现代码
Sep 30 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/06/10 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue ssr 指南详读
2018/06/29 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python快排算法详解
2019/03/04 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
介绍一下木马病毒的种类
2015/07/26 面试题
军训感想500字
2014/02/20 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
社会实践活动总结范文
2014/07/03 职场文书
2014年人事科工作总结
2014/11/19 职场文书
指导教师推荐意见
2015/06/05 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android