要在Angular中使用SweetAlert2进行多选,你可以按照以下步骤操作:
npm install sweetalert2
import Swal from 'sweetalert2';
Swal.mixin()
方法来创建一个自定义弹窗:showMultiSelect() {
Swal.mixin({
input: 'checkbox',
inputPlaceholder: 'Select options',
showCancelButton: true,
confirmButtonText: 'OK',
inputValidator: (result) => {
return new Promise((resolve) => {
if (result.length > 0) {
resolve();
} else {
resolve('You need to select at least one option');
}
});
}
}).queue([
{
title: 'Option 1',
value: 'option1'
},
{
title: 'Option 2',
value: 'option2'
},
{
title: 'Option 3',
value: 'option3'
}
]).then((result) => {
if (result.value) {
const selectedOptions = result.value;
console.log('Selected options:', selectedOptions);
// 处理选择的选项
}
});
}
showMultiSelect()
方法:
这样,当你点击按钮时,将会弹出一个可多选的SweetAlert2弹窗。用户选择的选项将会在控制台中打印出来,你可以根据需要进行进一步的处理。