swal设置多个按钮
时间: 2023-07-28 09:03:17 浏览: 48
swal是一个用于创建美观弹窗的JavaScript库。它提供了一种简单易用的方式来显示弹窗,并允许我们自定义弹窗中的按钮。
如果我们需要在一个swal弹窗中设置多个按钮,可以使用数组的方式来定义这些按钮。
首先,我们需要创建一个包含按钮选项的数组。每个按钮选项是一个包含文本和事件处理函数的对象。我们可以通过设置对象的text属性来定义按钮上显示的文本,通过设置对象的value属性来定义按钮的值。
接下来,我们将这些按钮选项数组作为buttons属性的值传递给swal函数。例如:
```javascript
swal({
title: "多按钮弹窗",
text: "请选择一个按钮",
buttons: [
{
text: "按钮1",
value: "button1",
// 设置按钮1的事件处理函数
// ...
},
{
text: "按钮2",
value: "button2",
// 设置按钮2的事件处理函数
// ...
},
{
text: "按钮3",
value: "button3",
// 设置按钮3的事件处理函数
// ...
}
]
}).then((value) => {
// 在这里处理选择的按钮值
if (value === "button1") {
// 用户选择了按钮1
} else if (value === "button2") {
// 用户选择了按钮2
} else if (value === "button3") {
// 用户选择了按钮3
}
});
```
在这个例子中,我们创建了一个含有3个按钮的弹窗。每个按钮都有不同的文本和值。当用户点击其中一个按钮时,将触发对应的事件处理函数,并根据按钮的值进行处理。
通过这种方式,我们可以在swal弹窗中设置多个按钮,并根据用户选择的按钮值执行不同的操作。