Sweealert1JS插件迁移到Sweealert2

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!");
}
});

sweetalert1：https://sweetalert.js.org/guides/#advanced-示例

sweetalert2：https://sweetalert2.github.io/

请帮我把代码格式化为sweetalert2，好吗？

Answer 1

首先，SweetAlert2默认不允许超过2个按钮，但您可以通过使用带有jQuery绑定的自定义HTML按钮来实现这一点，如本问题所述。对于你的具体问题，结果应该或多或少是这样的：

$(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>

SweetAlert2 repo上有一个文档页面，它提供了关于迁移组件其余部分的更好解释(以及很酷的示例！(。但这应该会让你走上你需要做的事情的道路