正文

JavaScript SweetAlert2：轻松掌握js弹窗警告功能，告别繁琐代码！

/0 浏览量
0522

SweetAlert2 是一款流行的 JavaScript 库，用于在网页上创建精美的模态弹窗、消息提示、确认对话框等。它可以帮助开发者轻松实现丰富的交互效果，而不必编写复杂的代码。本文将为你详细介绍 SweetAlert2 的使用方法，帮助你快速掌握 JavaScript 弹窗警告功能。

一、SweetAlert2 的特点

  1. 简洁易用：SweetAlert2 的 API 简洁明了，易于理解和使用。
  2. 高度定制：支持多种主题、动画效果和功能扩展。
  3. 兼容性强：支持多种浏览器，包括 Chrome、Firefox、Safari 等。
  4. 可扩展性：可以轻松集成其他第三方库，如 jQuery、Bootstrap 等。

二、安装与引入

1. 通过 npm 安装

如果你使用的是 npm 管理项目依赖，可以通过以下命令安装 SweetAlert2：

npm install sweetalert2

2. 通过 CDN 引入

你也可以通过 CDN 快速引入 SweetAlert2：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

三、基本用法

1. 消息提示

使用 Swal.fire() 方法可以创建一个简单的消息提示框：

Swal.fire({
  title: 'Hello!',
  text: 'This is a simple alert message!',
  icon: 'info',
  confirmButtonText: 'Ok'
});

2. 确认对话框

创建一个确认对话框，让用户进行选择：

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
});

3. 定制样式

SweetAlert2 支持多种主题和样式，可以通过 customClass 属性进行定制：

Swal.fire({
  title: 'Custom Class',
  text: 'This alert has a custom class!',
  customClass: {
    confirmButton: 'btn btn-primary',
    cancelButton: 'btn btn-danger'
  },
  buttonsStyling: false
});

四、进阶功能

SweetAlert2 提供了许多进阶功能，如进度条、输入框、图片等。以下是一些示例：

1. 进度条

const timer = Swal.fire({
  title: 'Please wait',
  html: '<b>Requesting</b> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>',
  allowOutsideClick: false,
  showConfirmButton: false,
  onBeforeOpen: () => {
    Swal.showLoading();
  },
  progressSteps: [20, 40, 60, 80, 100]
}).then(() => {
  Swal.fire('Request finished!', '', 'success')
});

2. 输入框

Swal.fire({
  title: 'Input something',
  input: 'text',
  inputValidator: (value) => {
    return value === '' ? 'You need to write something!' : '';
  },
  showLoader: true,
  preConfirm: (value) => {
    return fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(data => Swal.showLoading())
      .then(() => {
        setTimeout(() => {
          Swal.resetValidation()
          Swal.fire({
            title: 'All done!',
            html: `Your input: <strong>${value}</strong>`,
            confirmButtonText: 'Keep it'
          })
        }, 2000)
      })
  },
  allowOutsideClick: false
})

3. 图片

Swal.fire({
  title: 'The Internet?',
  text: 'That thing is still around?',
  icon: 'question',
  input: 'text',
  inputValidator: (value) => {
    return value === '' ? 'You need to type something!' : '';
  },
  showCancelButton: true,
  confirmButtonText: 'I am sure',
  cancelButtonText: 'No, cancel it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: 'Yay!',
      text: 'You clicked the button!',
      icon: 'success',
      html: `<img src="https://via.placeholder.com/150" />`,
      showCloseButton: true
    })
  }
})

五、总结

SweetAlert2 是一款非常实用的 JavaScript 弹窗警告库，可以帮助开发者轻松实现丰富的交互效果。通过本文的介绍，相信你已经对 SweetAlert2 的基本用法和进阶功能有了深入了解。希望这篇文章能帮助你更好地掌握 JavaScript 弹窗警告功能，为你的网页项目增色添彩！

-- 展开阅读全文 --