怎么样搞小程序_Angular中sweetalert弹框的根本使用教程

  • 栏目:行业动态 时间:2021-01-08 13:51 分享新闻到:
<返回列表

Angular中sweetalert弹框的基本使用教程       这篇文章主要给大家介绍了关于Angular中sweetalert弹框的基本使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了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("请选中数据再进行操作");

2、确认提示框

swal({
 title: "提交",
 text: "确定提交吗",
 icon: 'info',
 buttons: {
 cancel: true,
 confirm: "Confirm"
 })

效果:

3、成功信息提示

swal("提交", "提交成功成功", 'success');

效果:

4、错误信息提示

swal("删除", "删除成功", 'error');

效果:

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');
});

效果:

点击取消执行else中的方法

点击确定直接执行函数

五、相关问题

1、传函数错误

Swal(“确定提交吗”, function(){}, ‘error'); //这种写法在我用的这个版本中是错误的,我的这个版本支持then(), 不支持直接在参数中写方法

2、API问题

在这个版本中以下写法只能实现title和text的效果,其他属性都不起作用

swal({
 title: "确定删除吗?",
 text: "你将无法恢复该虚拟文件!",
 type: "warning",
 showCancelButton: true,
 confirmButtonColor: "#DD6B55",
 confirmButtonText: "确定删除!",
 closeOnConfirm: false
 function(){
 swal("删除!", "你的虚拟文件已经被删除。", "success");
 });

在这个版本中只能按照我最上面所列举的去实现,那是我在官方英文文档中发现的,中文文档太坑了。

官方文档:docs/

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。


分享新闻到:

更多阅读

怎么样搞小程序_Angular中sweetalert弹框的根

行业动态 2021-01-08
Angular中sweetalert弹窗的基本应用实例教程 本文关键给大伙儿详细介绍了有关Angular中swee...
查看全文

广州凡科互联网科技股份有限公司招聘资

行业动态 2021-01-08
招聘人数:13职位信息1、商户的营销定位、整体推广计划与方案,线上及线下活动项目方案策...
查看全文

广州凡科互联网科技股份有限公司招聘诚

行业动态 2021-01-08
招聘人数:11职位信息1、通过旺旺、以及电话等通讯工具为买家解答产品使用问题以及其他疑...
查看全文
返回全部新闻


区域站点: 南丰县如何建立微信小程序   南宫市自己搭建服务器   囊谦县建立网站   南和县自助建站免费建站平台   南华县如何建立微信小程序   南江县自己搭建服务器   南京市建立网站   南靖县自助建站免费建站平台   南康市如何建立微信小程序   南乐县自己搭建服务器   南陵县建立网站   南宁市自助建站免费建站平台   南平市如何建立微信小程序   南皮县自己搭建服务器   南市区建立网站   南通市自助建站免费建站平台   南投县如何建立微信小程序   南雄市自己搭建服务器   南溪县建立网站   南阳市自助建站免费建站平台   南漳县如何建立微信小程序   南召县自己搭建服务器   南郑县建立网站   那坡县自助建站免费建站平台   那曲县如何建立微信小程序   纳雍县自己搭建服务器   讷河市建立网站   内黄县自助建站免费建站平台   内江市如何建立微信小程序   内丘县自己搭建服务器   内乡县建立网站   嫩江市自助建站免费建站平台   聂荣县如何建立微信小程序   尼玛县自己搭建服务器   尼木县建立网站   宁安市自助建站免费建站平台   宁波市如何建立微信小程序   宁城县自己搭建服务器   宁德市建立网站   宁都县自助建站免费建站平台   宁国市如何建立微信小程序   宁海县自己搭建服务器   宁化县建立网站   宁晋县自助建站免费建站平台   宁陵县如何建立微信小程序   宁明县自己搭建服务器   宁南县建立网站   宁强县自助建站免费建站平台   宁陕县如何建立微信小程序   宁武县自己搭建服务器   宁乡市建立网站   宁阳县自助建站免费建站平台   宁远县如何建立微信小程序   农安县自己搭建服务器   磐安县建立网站   盘锦市自助建站免费建站平台   盘山县如何建立微信小程序   磐石市自己搭建服务器   盘州市建立网站   蓬安县自助建站免费建站平台   澎湖县如何建立微信小程序   蓬莱市自己搭建服务器   彭山县建立网站   蓬溪县自助建站免费建站平台   彭阳县如何建立微信小程序   彭泽县自己搭建服务器   彭州市建立网站   偏关县自助建站免费建站平台   平安县如何建立微信小程序   平昌县自己搭建服务器   平定县建立网站   屏东县自助建站免费建站平台   平度市如何建立微信小程序   平果县自己搭建服务器   平和县建立网站   平湖市自助建站免费建站平台   平江县如何建立微信小程序   平乐县自己搭建服务器   平凉市建立网站   平利县自助建站免费建站平台   平罗县如何建立微信小程序   平陆县自己搭建服务器   屏南县建立网站   平泉市自助建站免费建站平台   屏山县如何建立微信小程序   平顺县自己搭建服务器   平塘县建立网站   平潭县自助建站免费建站平台   平武县如何建立微信小程序   萍乡市自己搭建服务器   平乡县建立网站   平阳县自助建站免费建站平台   平遥县如何建立微信小程序   平阴县自己搭建服务器   平邑县建立网站   平远县自助建站免费建站平台   平舆县如何建立微信小程序   皮山县自己搭建服务器   普安县建立网站   浦北县自助建站免费建站平台   浦城县如何建立微信小程序   普洱市自己搭建服务器   普格县建立网站   浦江县自助建站免费建站平台   普兰县如何建立微信小程序   普宁市自己搭建服务器   莆田市建立网站   迁安市自助建站免费建站平台   乾安县如何建立微信小程序   潜江市自己搭建服务器   潜山市建立网站  

友情链接: 自助免费建站 快速建站 360免费建站永久免 自助建站

Copyright © 2002-2020 建立网站_自助建站免费建站平台_如何建立微信小程序_自己搭建服务器_网站建设空间 版权所有 (网站地图) 备案号:粤ICP备10235580号