在VueJS中使用Sweetalert2显示多个选择选项,可以通过以下步骤实现:
import Swal from 'sweetalert2'
import Vue from 'vue'
Swal.mixin()
方法创建一个弹窗混合对象:methods: {
showMultipleOptions() {
Swal.mixin({
input: 'checkbox',
inputOptions: {
option1: 'Option 1',
option2: 'Option 2',
option3: 'Option 3'
},
inputValidator(value) {
return new Promise((resolve) => {
if (value.length > 0) {
resolve()
} else {
resolve('You need to select at least one option')
}
})
},
inputPlaceholder: 'Select options',
showCancelButton: true,
confirmButtonText: 'Submit',
cancelButtonText: 'Cancel',
reverseButtons: true
}).queue([
{
title: 'Multiple Options',
text: 'Select multiple options',
input: 'checkbox',
inputOptions: {
option1: 'Option 1',
option2: 'Option 2',
option3: 'Option 3'
},
inputValidator(value) {
return new Promise((resolve) => {
if (value.length > 0) {
resolve()
} else {
resolve('You need to select at least one option')
}
})
},
inputPlaceholder: 'Select options',
showCancelButton: true,
confirmButtonText: 'Submit',
cancelButtonText: 'Cancel',
reverseButtons: true
}
]).then((result) => {
if (result.value) {
const selectedOptions = result.value[0]
// 处理选中的选项
console.log(selectedOptions)
}
})
}
}
<template>
<div>
<button @click="showMultipleOptions">Show Multiple Options</button>
</div>
</template>
这样,当你点击"Show Multiple Options"按钮时,将会弹出一个Sweetalert2弹窗,其中包含多个选择选项。用户可以选择一个或多个选项,并点击"Submit"按钮进行提交。选中的选项将会在控制台中打印出来,你可以根据需要进行进一步处理。
请注意,以上代码示例中的Sweetalert2配置仅供参考,你可以根据自己的需求进行调整。另外,如果你想了解更多关于Sweetalert2的详细信息,可以参考腾讯云的相关产品Sweetalert2的介绍页面:Sweetalert2产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云