大家都知道,在一個項目中我們經常會用到alert彈框顯示提示信息,但是由於alert彈框太醜了,放到項目中完全不搭。所以就需要漂亮的彈框來提高用戶體驗。於是,我就發現了sweetalert彈框。那麼,如何在Angular項目中使用sweetalert彈框呢?請看下文。
一、下載文件
npm installangular-sweetalert
npm installsweetalert
當npm下載angular-sweetalert時,會附帶下載sweetalert,但是只能用sweetalert中的css,js必須通過npm下載sweetalert,引入下載的sweetalert.min.js
二、版本說明
Angular V1.2.30Angular-sweetalert V1.0.4Sweetalert V2.1.0因為我們項目使用的angular版本較低,所以相對應下載的angular-sweetalert版本也低。
一定要注意版本,如果angular-sweetalert版本過高,所依賴的文件angular版本過低,會導致引入報錯。
三、引入文件
sweetalert/sweetalert.min.cssangular/angular.min.jsangular-sweetalert/SweetAlert.min.jssweetalert/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');
更多精彩文章繼續更新中。。。