javascript - sweetalert JS 插件迁移到 Sweetalert2

Question

我需要将我的 sweetalert1 JS 插件迁移到 Sweetalert2 插件。

但是我完全不知道如何迁移以下代码:

swal("A wild Pikachu appeared! What do you want to do?", {
  buttons: {
    cancel: "Run away!",
    catch: {
      text: "Throw Pokéball!",
      value: "catch",
    },
    defeat: true,
  },
})
.then((value) => {
  switch (value) {

    case "defeat":
      swal("Pikachu fainted! You gained 500 XP!");
      break;

    case "catch":
      swal("Gotcha!", "Pikachu was caught!", "success");
      break;

    default:
      swal("Got away safely!");
  }
});

甜心1:https://sweetalert.js.org/guides/#advanced-examples

甜蜜提醒2:https://sweetalert2.github.io/

在格式化代码到 sweetalert2 方面有什么帮助吗？

Answer 1

首先，SweetAlert2 默认不允许超过 2 个按钮，但您可以通过使用带有 jQ​​uery 绑定(bind)的自定义 HTML 按钮来实现相同的目的 as described in this question .对于您的特定问题，结果或多或少应该是这样的:

    $(document).on('click', '.SwalBtn1', function() {
        //Some code 1
        console.log('Button 1');
        swal.clickConfirm();
        swal("Got away safely!");
    });
    $(document).on('click', '.SwalBtn2', function() {
        //Some code 2 
        console.log('Button 2');
        swal.clickConfirm();
        swal("Gotcha!", "Pikachu was caught!", "success");
    });
    $(document).on('click', '.SwalBtn3', function() {
        // Some code 3
        console.log('Button 3');
        swal.clickConfirm();
        swal("Pikachu fainted! You gained 500 XP!");
    });

    swal({
        title: 'Oh oh!',
        html: "<p>A wild Pikachu appeared! What do you want to do?</p>" +
            '<button class="SwalBtn1 swal2-custom-button swal2-styled">' + 'Run Away!' + '</button>' +
            '<button class="SwalBtn2 swal2-custom-button swal2-styled">' + 'Throw Pokéball!' + '</button>' +
            '<button class="SwalBtn3 swal2-custom-button swal2-styled">' + 'Defeat!' + '</button>',
        showCancelButton: false,
        showConfirmButton: false
    });

.swal2-custom-button {
  background-color: #3085d6;
  color: #fff;
  border: 0;
  border-radius: .2em;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.25.0/dist/sweetalert2.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

有一个documentation page在 SweetAlert2 存储库上，它提供了关于迁移其余组件的更好解释(和很酷的示例!)。但这应该让您走上需要做的事情的道路上。