核心 PHP 中的 Swal.fire

Swal.fire 是一个基于 Promise 的弹窗插件，可以定制化弹窗的标题、文本、图标和按钮等内容，支持 AJAX 加载和动画效果。本文将介绍核心 PHP 中如何使用 Swal.fire 插件。

安装

Swal.fire 可以通过 CDN 直接引入，也可以通过 npm 安装。我们这里介绍的是通过 CDN 引入的方式。

在 HTML 文件中加入以下代码：

<!-- 引入 Swal.fire 插件 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

使用

Swal.fire 的使用非常简单，我们只需要在 JavaScript 代码中调用相关的方法即可。下面是一个使用 Swal.fire 弹窗的示例：

Swal.fire({
  title: 'Hello!',
  text: '你好！',
  imageUrl: 'https://placeimg.com/64/64/any',
  imageAlt: '任意图片',
  animation: false
})

在这个示例里，我们定制了弹窗的标题、文本、图片和动画效果。

Swal.fire 还支持 Promise 回调函数，允许我们在用户点击按钮后执行特定的操作。例如：

Swal.fire({
  title: '用户登录',
  html: '<input id="swal-input1" class="swal2-input" placeholder="输入用户名">' +
        '<input id="swal-input2" class="swal2-input" placeholder="输入密码" type="password">',
  focusConfirm: false,
  preConfirm: () => {
    const username = Swal.getPopup().querySelector('#swal-input1').value
    const password = Swal.getPopup().querySelector('#swal-input2').value
    if (!username || !password) {
      Swal.showValidationMessage('用户名或密码不能为空！')
    }
    return { username: username, password: password }
  }
}).then((result) => {
  if (result.value) {
    Swal.fire({
      type: 'success',
      title: '登录成功！',
      html: `用户名：${result.value.username}<br>密码：${result.value.password}`
    })
  }
})

这个示例演示了如何创建一个简单的用户登录弹窗，我们可以通过 Swal.fire 配置项定制化弹窗的标题、文本、输入框和按钮等内容。

结语

Swal.fire 是一个非常好用的弹窗插件，可以快速创建出各种样式的弹窗。对于 PHP 开发者来说，Swal.fire 可以让我们在 PHP 中创建出美观、交互性强的界面。