当前位置：首页 > 行业动态 > 正文

swal cdn

admin
行业动态
2025-02-25
7

Swal 是一个流行的 JavaScript 库，用于创建优雅的警告框、确认框等弹窗。你可以通过 CDN 引入 Swal，例如使用以下代码：，“ html，，“

Swal是一个用于创建美观对话框的JavaScript库，提供基础警告框、带标题警告框、成功提示框、错误提示框、确认对话框及带输入框的对话框等多种用法，它还支持定制外观、用户输入验证和异步任务处理等功能。

使用Swal的步骤

1、引入Swal库：

可以通过CDN方式引入Swal库，例如使用unpkg或jsDelivr提供的CDN链接，在HTML文件中添加以下脚本标签：

     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">

也可以使用npm或yarn安装Swal，然后在项目中导入。

2、调用Swal函数：

在确保DOM加载后，可以调用Swal函数来显示对话框。

swal cdn

     swal("Hello world!");

如果需要传递更多参数，可以这样做：

     swal("Here's the title!", "...and here's the text!");

或者使用对象来配置对话框：

     swal({
       title: "Good job!",
       text: "You clicked the button!",
       icon: "success",
       button: "确定",
     });

3、处理用户交互：

Swal使用promises来跟踪用户如何与对话框交互，如果用户点击确认按钮，promise将解析为true；如果通过点击对话框外部关闭，promise将解析为null。

swal cdn

     swal("Click on either the button or outside the modal.")
       .then((value) => {
         swal(The returned value is: ${value});
       });

示例代码

以下是一个完整的示例，展示了如何使用Swal创建一个带有标题、文本、成功图标和自定义按钮的对话框：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swal Example</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
  <button id="showSwal">Show Swal</button>
  <script>
    document.getElementById('showSwal').addEventListener('click', function() {
      swal({
        title: 'Success!',
        text: 'You clicked the button!',
        icon: 'success',
        button: '确定',
      });
    });
  </script>
</body>
</html>

在这个示例中，当用户点击“Show Swal”按钮时，会弹出一个包含标题“Success!”、文本“You clicked the button!”、成功图标和“确定”按钮的对话框。