Angular中sweetalert彈框的使用詳解,最全了!

2020-12-25 百家號

大家都知道,在一個項目中我們經常會用到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');

更多精彩文章繼續更新中。。。

相關焦點

  • 彈框體系總結:模態彈框和非模態彈框
    模態彈框   模態彈框和非模態彈框最大的區別就是是否強制用戶交互。模態彈框會打斷用戶的當前操作流程,用戶不在彈框上操作的話,其餘功能都使用不了。從這方面,我們可以看出來模態彈框的優缺點都十分的明顯:優點是可以很好的獲取的用戶的視覺焦點,缺點是打斷了用戶的當前操作流程。模態彈框屬於一種重量性反饋,一般用於用戶進行重要的操作。
  • 如何使用彈框,讓它彈得「有理有據」?
    上文為大家介紹了平臺規範中的彈框類型,那麼我們又該如何判斷在哪些場景中需要用彈框?需要的話又需要哪種類型的彈框?針對這些疑問,筆者將展開進一步分析。上一期我們講解了平臺規範中模態、非模態框的類型以及它們的使用方法。可回顧:《掌握「彈窗」設計規範,打造優質用戶體驗》。
  • 瀏覽器在Angular 5中推送通知
    使用與Angular 5兼容的代碼提醒您的用戶有關您的應用程式的任何相關通知或更改。在今天的基於網絡的應用程式開發中,主要功能之一是信息通知。通知過程或機制總是可以幫助人們按時傳遞信息並提醒人們他們正在等待的任務。最近對移動用戶的一項研究表明,移動用戶每天平均收到63條通知,其中大部分來自消息或電子郵件應用。
  • 使用 AngularJS & NodeJS 實現基於 token 的認證應用
    類似 [https://api.yourexampleapp.com](https://api.yourexampleapp.com) 這樣的請求發送到服務層。如果很多人使用了這個應用,需要多個伺服器來響應這些請求操作。這時,負載均衡被用於平衡請求,目的是達到最優化的後端應用服務。
  • 彈框&新頁面,各自使用場景有什麼區別?
    在做Web端項目的過程中,涉及到交互採用彈框還是新頁面的時候,比較糾結,到底用哪一種更好;考慮到用戶體驗的話,就需要斟酌一番了,下文我針對自己的理解談一下各自的使用場景。彈框內只有加入黑名單、移到垃圾郵件兩個小的功能點;使用場景:通常一些分支流程上的操作,內容不多,都可以使用彈框來處理;實例參考:比如客戶管理,標註客戶級別,設置客戶狀態是否禁用,設置客戶角色,設置客戶標籤等都可以使用彈框。
  • 報警神器 AlertManager 的使用
    /alertmanager --config.file=simple.yml其中-config.file參數是用來指定對應的配置文件的,由於我們這裡同樣要運行到 Kubernetes 集群中來,所以我們使用docker鏡像的方式來安裝,使用的鏡像是:prom/alertmanager:v0.15.3。
  • 四類彈框的四大設計準則
    ,其實一個彈框就是一個彈框而已,沒那麼多講究。注意彈框的頻率。別一會就彈一會就彈的,彈出魚尾紋怎麼辦。3.專門定個入口。有些用戶確實人品不錯,他會在使用之後去給產品評價,所以留個這樣的入口,層級可以深一點,讓用戶自己去操作,會更好。如:
  • 新手指南:DVWA-1.9全級別教程(完結篇,附實例)之XSS
    漏洞利用        輸入<script>alert(/xss/)</script>,成功彈框:>可以看到,這裡對輸入進行了過濾,基於黑名單的思想,使用str_replace函數將輸入中的<script>刪除,這種防護機制是可以被輕鬆繞過的。漏洞利用        1.雙寫繞過輸入<sc<script>ript>alert(/xss/)</script>,成功彈框:
  • 【第1208期】AngularJS 1.x平滑升級Angular實戰
    在下面的實例中,我使用了ng1和ng2來命名:創建完之後,移動除了tsconfig.app.json, tsconfig.spec.json, favicon.ico和index.html之外的文件到ng2文件夾中。通過.angular-cli.json文件來通知CLI的編譯任務有關修改的新代碼結構。
  • 在ASP.NET Core中使用Angular2,以及與Angular2的Token base身份認證
    得益於徹底重構,性能相對於Angular1.x有了大幅提升,也更適合再全平臺部署。app.module.tsimport { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { AppComponent } from ".
  • Prometheus+Grafana+Alertmanager實現告警推送教程圖文詳解
    支持雙精度浮點類型,標籤可以設為全unicode。靈活而強大的查詢語句(PromQL):在同一個查詢語句,可以對多個 metrics進行乘法、加法、連接、取分數位等操作。易於管理:Prometheus server是一個單獨的二進位文件,可直接在本地工作,不依賴於分布式存儲。
  • Prometheus+Grafana+Alertmanager實現告警推送教程——圖文詳解
    支持雙精度浮點類型,標籤可以設為全unicode。 靈活而強大的查詢語句(PromQL):在同一個查詢語句,可以對多個 metrics進行乘法、加法、連接、取分數位等操作。易於管理: Prometheus server是一個單獨的二進位文件,可直接在本地工作,不依賴於分布式存儲。
  • Angular 4 指令快速入門
    繼承於 Directive 類屬性指令(Attribute directive):用於改變組件的外觀或行為結構指令(Structural directive):用於動態添加或刪除 DOM 元素來改變 DOM 布局Angular 指令分類圖Angular 組件組成圖第一節 - 創建指令在 Angular 中,我們可以使用 HostBinding
  • Angular學習筆記(一)
    子組件使用 @Output() 屬性來引發事件,以通知父組件這一變化。為了引發事件,@Output()必須是EventEmitter類型,它是@angular/core中用來發出自定義事件的類。要想在項目中使用路由,首先要創建一個帶路由的應用項目。
  • 通過5個簡單步驟升級到Angular 7
    升級到Angular 7隻需幾個簡單的步驟:首先,通過終端添加最新版本全局升級Angular版本:sudo npm install -g @angular/cli@latest在項目中本地升級版本,並確保新版本的更改反映在package.json文件中ng update @angular/cli升級package.json中的所有依賴項和dev依賴項依賴關係:npm install -
  • Angular2 架構總覽
    簡單來說,Angular應用由使用Angular式的標記語言寫的HTML模板組成,使用conpoment類管理這些模板,在service中添加業務邏輯,使用bootstrapper管理根組件。例如angular2/core、angular2/common、angular2/router、angular2/http。
  • Spoiler alert
    But I did say 'spoiler alert' before I told you! And don't worry - there's going to be another episode tonight, because - spoiler alert! - the evil unicorn, Bob, didn't die at the end!
  • JavaScript中的Promise使用詳解
    熟悉前端開發的都一定寫過回調方法(callback),簡單的說,回調方法是一個函數被作為參數傳遞給另一個函數,比如下面的代碼 function say (value) {    alert那麼如何解決地獄回調,保持我們的代碼簡短,這時Promise就出場了,Promise對象可以理解為一次執行的異步操作,使用Promise對象之後可以使用一種鏈式調用的方式來組織代碼;讓代碼更加的直觀。
  • Angular 10 版本現已發布
    新的日期範圍選擇器的圖像要使用新的日期範圍選擇器,可以使用mat-date-range-input和mat-date-range-picker組件。請參閱StackBlitz上的示例。要為需要它的瀏覽器(例如IE或UC Browser)啟用ES5構建和差異加載,只需在文件中添加需要支持的瀏覽器即可.browserslistrc。
  • IOS和ANDROID規範解析之簡易菜單+彈框
    所有的確認彈框都share一個共同點:彈框裡只專注選擇一個值。在全屏彈框裡,各種彈框都可以彈彈彈。全屏彈框是所有彈框中,唯一允許彈框上面有彈框的情況;一般情況下,除非是警告框,否則所有彈框都不能在別的彈框之上出現。至於何時使用全屏彈框,有以下幾個判斷標準: 所需彈框包含需要輸型入操作的入口,比如輸入框,或者日期選擇期。 改動不是實時保存的,而是點擊「保存」按鈕之後一起打包保存。