最近太忙了，項目中使用的彈框老板嫌太醜，讓我們優化一下，我在網上找了一下，找到了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彈框的使用詳解