Angular中sweetalert彈框的使用詳解
阿新 • • 發佈:2018-07-22
https text 找到 pre docs function 提示 行操作 ppr sweetalert,引入下載的sweetalert.min.js
最近太忙了,項目中使用的彈框老板嫌太醜,讓我們優化一下,我在網上找了一下,找到了sweetalert彈框,算是比較好看的彈框了。所以我就想辦法將sweetalert用到項目中,在項目中引入sweetalert時,遇到諸多問題,但最終在我不懈堅持下,都解決了,實現了效果。具體用法請看下文。寫的有問題的地方歡迎留言,我會及時更改。
一、下載文件
npm install angular-sweetalert
npm install sweetalert
當npm 下載angular-sweetalert時,會附帶下載sweetalert,但是只能用sweetalert中的css,js必須通過npm下載
二、版本說明
- 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、確認提示框
1 swal({ 2 title: "提交", 3 text: "確定提交嗎", 4 icon: ‘info‘, 5 buttons: { 6 cancel: true, 7 confirm: "Confirm" 8} 9 })
效果:
3、成功信息提示
1 swal("提交", "提交成功成功", ‘success‘);
效果:
4、錯誤信息提示
1 swal("刪除", "刪除成功", ‘error‘);
效果:
5、警告信息彈窗,“確認”按鈕帶有一個函數
效果:
1 swal({ 2 title: "審批", 3 text: "確定通過審批嗎", 4 icon: ‘warning‘, 5 buttons: { 6 cancel: "取消", 7 confirm: "確定" 8 } 9 }).then(function(isConfirm){ 10 if(isConfirm){ 11 httpService.post(‘/bill/add‘, { 12 billNo: $scope.content.statementBillno, 13 systemNo: ‘clearingservice‘, 14 approvalNo: ‘cs001‘, 15 userId: username, 16 shopNo: $scope.content.storeId 17 }, function(data) { 18 if(data) { 19 commonService.state.go("clearingservice.statements.list"); 20 } 21 }, config.systemInfo.approval); 22 }else{ 23 swal("取消","沒有審批",‘error‘); 24 } 25 26 });
效果:
點擊取消執行else中的方法
點擊確定直接執行函數
五、相關問題
1、傳函數錯誤
Swal(“確定提交嗎”, function(){}, ‘error’ ); //這種寫法在我用的這個版本中是錯誤的,我的這個版本支持then(), 不支持直接在參數中寫方法
2、API問題
在這個版本中以下寫法只能實現title和text的效果,其他屬性都不起作用
1 swal({ 2 title: "確定刪除嗎?", 3 text: "你將無法恢復該虛擬文件!", 4 type: "warning", 5 showCancelButton: true, 6 confirmButtonColor: "#DD6B55", 7 confirmButtonText: "確定刪除!", 8 closeOnConfirm: false 9 }, 10 function(){ 11 swal("刪除!", "你的虛擬文件已經被刪除。", "success"); 12 });
在這個版本中只能按照我最上面所列舉的去實現,那是我在官方英文文檔中發現的,中文文檔太坑了。
官方文檔:https://sweetalert.js.org/docs/
Angular中sweetalert彈框的使用詳解