快捷導(dǎo)航

Angular中sweetalert彈框的基本使用教程

更新時(shí)間：2018年07月22日 08:41:36 作者：半指溫柔樂(lè)

這篇文章主要給大家介紹了關(guān)于Angular中sweetalert彈框的基本使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近太忙了，項(xiàng)目中使用的彈框老板嫌太丑，讓我們優(yōu)化一下，我在網(wǎng)上找了一下，找到了sweetalert彈框，算是比較好看的彈框了。所以我就想辦法將sweetalert用到項(xiàng)目中，在項(xiàng)目中引入sweetalert時(shí)，遇到諸多問(wèn)題，但最終在我不懈堅(jiān)持下，都解決了，實(shí)現(xiàn)了效果。具體用法請(qǐng)看下文。寫的有問(wèn)題的地方歡迎留言，我會(huì)及時(shí)更改。

一、下載文件

npm install angular-sweetalert

npm install sweetalert

當(dāng)npm 下載angular-sweetalert時(shí)，會(huì)附帶下載sweetalert，但是只能用sweetalert中的css，js必須通過(guò)npm下載sweetalert，引入下載的sweetalert.min.js

二、版本說(shuō)明

Angular V1.2.30
Angular-sweetalert V1.0.4
Sweetalert V2.1.0

因?yàn)槲覀冺?xiàng)目使用的angular版本較低，所以相對(duì)應(yīng)下載的angular-sweetalert版本也低。

一定要注意版本，如果angular-sweetalert版本過(guò)高，所依賴的文件angular版本過(guò)低，會(huì)導(dǎo)致引入報(bào)錯(cuò)。

三、引入文件

sweetalert/sweetalert.min.css
angular/angular.min.js
angular-sweetalert/SweetAlert.min.js
sweetalert/sweetalert.min.js

注意:在app中添加依賴模塊‘oitozero.ngSweetAlert'

四、使用方法

1、基礎(chǔ)用法

swal("請(qǐng)選中數(shù)據(jù)再進(jìn)行操作");

2、確認(rèn)提示框

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

效果：

3、成功信息提示

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

效果:

4、錯(cuò)誤信息提示

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

效果：

5、警告信息彈窗，“確認(rèn)”按鈕帶有一個(gè)函數(shù)

效果：

swal({
 title: "審批",
 text: "確定通過(guò)審批嗎",
 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("取消","沒(méi)有審批",'error');
 }

});

效果：

點(diǎn)擊取消執(zhí)行else中的方法

點(diǎn)擊確定直接執(zhí)行函數(shù)

五、相關(guān)問(wèn)題

1、傳函數(shù)錯(cuò)誤

Swal(“確定提交嗎”, function(){}, ‘error'); //這種寫法在我用的這個(gè)版本中是錯(cuò)誤的，我的這個(gè)版本支持then(), 不支持直接在參數(shù)中寫方法

2、API問(wèn)題

在這個(gè)版本中以下寫法只能實(shí)現(xiàn)title和text的效果，其他屬性都不起作用

swal({
  title: "確定刪除嗎？",
  text: "你將無(wú)法恢復(fù)該虛擬文件！",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "確定刪除！",
  closeOnConfirm: false
 },
 function(){
  swal("刪除！", "你的虛擬文件已經(jīng)被刪除。", "success");
 });

在這個(gè)版本中只能按照我最上面所列舉的去實(shí)現(xiàn)，那是我在官方英文文檔中發(fā)現(xiàn)的，中文文檔太坑了。

官方文檔：https://sweetalert.js.org/docs/

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: