我正在尝试使用SweetAlert2创建一个逐步的表单,并且我需要能够基于if语句在我的链接中添加额外的步骤。
例如,在我的第三个模式中,我可能有一个单选问题,说“你会带一个加1吗?”,如果用户选择“true”,我需要弹出一个额外的阶段,询问“name of plus 1”,如果用户选择“false”,则只需继续。
swal.mixin({
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1', '2', '3', '4']
}).queue([
{
title: 'Which event?',
text: 'Please start by selecting the event you would like to book in!',
input: 'select',
inputClass: 'swal-select-event',
inputPlaceholder: 'Please Select',
inputOptions: {
'1' : 'Dance Event',
'2' : 'Football Event'
},
inputValidator: (value) => {
return new Promise((resolve) => {
if (value === '') {
resolve('You need to select an event!')
} else {
resolve()
}
})
}
},
{
title: 'What Day?',
text: 'Which day are they due to come in?',
html:'<input id="swal-booking-date-select" type="date"/>',
preConfirm: () => {
return document.getElementById('swal-booking-date-select').value
},
inputValidator: (value) => {
return new Promise((resolve) => {
if (value === '') {
resolve('You need to select a date!')
} else {
resolve()
}
})
}
},
{
title: 'Plus one?',
text: 'Will you be bringing a plus one with you?',
input: 'radio',
inputOptions: {
'yes' : 'Yes',
'no' : 'No'
},
inputValidator: (value) => {
return new Promise((resolve) => {
if (value === null) {
resolve('I need to know if you will be bringing a plus 1!')
} else if(value === 'yes') {
//EXTRA STAGE GOES HERE TO GET PLUS ONE NAME
} else {
resolve()
}
})
}
},
{
title: 'What else?',
input: 'text',
text: 'Any other information that needs noting for this booking?'
}
]).then((result) => {
if (result.value) {
//Do something with all of the data here
}
})
有没有人知道这是否可能?
发布于 2018-06-06 07:25:10
一种方法是使用一个简单的Swal实例来实现这个额外的可选步骤...并将该值保存在全局声明的备用变量中。
var plus1name="";
为了清楚起见,我不会重复你所有的代码,因为没有改变。下面是要添加的新部件:
//EXTRA STAGE GOES HERE TO GET PLUS ONE NAME
swal({
title:"Plus one!",
text:"What is his/her name?",
input:"text"
}).then(function(value){
plus1name = value;
resolve();
});
然后在.then(result)
部分中:
//Do something with all of the data here
swalResults = result.value;
swalResults.push(plus1name.value)
console.log(swalResults);
所以你有一个包含所有答案的数组。额外的问题是在它的末尾推送的,所以数组中的顺序不是询问的顺序……
我在上做过。
https://stackoverflow.com/questions/50709734
复制相似问题