📜  SweetAlert 库介绍和安装示例

📅  最后修改于: 2021-11-08 06:43:51             🧑  作者: Mango

在构建 JavaScript 驱动的网站时,我们经常需要向用户提供反馈,让他们知道他们执行的操作是否成功。在 Web 的早期,开发人员过去常常使用 window.alert()函数来创建消息。虽然 alert() 在实践中有效,并且在浏览器之间也保持一致,但它不是很灵活,老实说,它的外观和感觉很糟糕。今天,有几种方法被采用,从模态到内联消息。在本文中,我将向您介绍 sweetAlert,这是一个替代 JavaScript 的 alert()函数。

SweetAlert CDN 库: sweetAlert 是 JavaScript 的 window.alert()函数的替代品,该函数显示非常漂亮的模态窗口。它是一个没有依赖关系的独立库,它由一个 JavaScript 文件和一个 CSS 文件组成。

Sweet Alert 用于使警报框更具吸引力且更易于设计。 Sweet JS 提供简单的方法来设计和添加很多功能到网站的警报框,只需调用sweet alert 的函数(简称SWAL())。

一个漂亮的 JavaScript 替代品证实了这个消息!它将用漂亮的可定制和功能齐全的模式替换丑陋的确认消息。

Sweet Alert 是一种在您的游戏和网站中自定义警报的方法。它允许您从标准的 JavaScript 按钮进行更改。我们可以添加按钮、更改颜色文本,甚至添加根据用户点击而变化的附加警报。我们还可以在警报中放置图标。我们也可以使用 JavaScript 的 setTimeout函数来设置警报显示的时间

安装:

  • 使用 NPM:
npm install sweetalert --save

CDN链接:

句法:

swal("add title Text","Add simple text","add icon",
       {Json Format To add other swal function})

注意: swal() 接受标题文本(比简单文本粗体大一些)、简单文本和图标作为默认参数您可以使用 JSON 来使用 Sweetalert 的任何其他函数。如果在 swal() 中只给出了一个文本,那么它将是简单文本。如果有两个文本,那么第一个是标题文本,第二个是简单文本

下面的例子说明了 SweetAlert 的工作。

示例 1:

html



  GeeksForGeeks Sweet alert
  
  


  


HTML



  GeeksForGeeks Sweet alert
  
  


  


HTML



  GeeksForGeeks Sweet alert
  
  


  


html


    
        GeeksForGeeks Sweet alert
        
        
    
  
    
        
    


html


    
        GeeksFor Geeks Sweet alert
        
        
    
  
    
        
    


html


    
        GeeksFor Geeks Sweet alert
        
        
    
  
    
        

GeeksforGeeks

             


输出:

示例 2:

HTML




  GeeksForGeeks Sweet alert
  
  


  


输出:

Sweet Alert的JSON属性列表:

  1. 标题:如果标题作为 Swal() 中的第一个参数给出,则用于在警告框中写入标题,然后 JSON 属性标题将覆盖该目标值
  2. 文本:此属性用于在警报框中写入文本。如果 Swal() 包含 JSON 属性之外的简单文本,那么它将覆盖这些文本。
  3. 图标:用于显示图标。 SweetAlert 带有 4 个可以使用的内置图标:
    • 警告
    • 错误
    • 成功
    • 信息

示例 3:但是您可以通过将图像地址放在引号中来添加图标图像,例如:

HTML




  GeeksForGeeks Sweet alert
  
  


  


输出:

  • 按钮和按钮:按钮用于创建单个按钮,而按钮用于创建多个按钮。默认情况下,按钮有两个按钮“取消”和“确定”,默认配置。

示例 4:您可以在 button 和 swal 中添加 className 属性来更改按钮和对话框的样式,如下图所示:

html



    
        GeeksForGeeks Sweet alert
        
        
    
  
    
        
    

输出:

示例 5:

html



    
        GeeksFor Geeks Sweet alert
        
        
    
  
    
        
    

输出:

  • content:这用于添加任何元素,如 P 元素、H1 元素、Button、Textarea、Input、Div 等。 content 属性包含两个元素名称及其属性,属性表示元素的内部属性,如内联样式、宽度,高度,占位符,类名等,以下是输入元素的示例代码。
swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Enter any Number",
      // Type can be range,can be 
      // password and can be text
      type: "number", 
     },
  },
});

创建段落元素:

swal({
  content: {
    element: "p",
    attributes: {
     innerText:"hello",
     style:"color:blue;",
     className:"p",
    
    },
  },
});

示例 6:创建段落元素。

html



    
        GeeksFor Geeks Sweet alert
        
        
    
  
    
        

GeeksforGeeks

             

输出:

参考: https : //sweetalert.js.org/