📌  相关文章
📜  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/