问题描述
我使用Sweet Alert,所以在执行危险操作之前我会弹出对话框。示例。
swal({
title: "Are you sure?",text: "Once deleted,you will not be able to recover this imaginary file!",icon: "warning",buttons: true,dangerMode: true,})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!",{
icon: "success",});
} else {
swal("Your imaginary file is safe!");
}
});
但用户可以根据需要输入任何备注,这是可选的,不是必需的。所以会变成这个样子
function RequestUpload(value) {
swal({
title: "Are you sure?",text: "Are you sure want to request to upload?",content: {
element: "input",attributes: {
placeholder: "Any remarks?",type: "text",},})
.then((willDelete,input) => {
if (willDelete) {
swal(`You typed: ${input}`);
//Call ajax here
}
else {
swal(`Is not delete`);
}
});
}
知道如何解决这个问题吗?
解决方法
输入值作为第一个参数提供。当您单击取消、在弹出窗口外部单击或按 ESC 时,您将获得 null
值,该值将关闭警报(即:触发您的 else)。否则,如果您单击“确定”,它将保留您的输入值:
.then((input) => {
if (input !== null) {
swal(`You typed: ${input}`);
//Call ajax here
} else {
swal(`Is not delete`);
}
});
function RequestUpload(value) {
swal({
title: "Are you sure?",text: "Are you sure want to request to upload?",icon: "warning",buttons: true,dangerMode: true,content: {
element: "input",attributes: {
placeholder: "Any remarks?",type: "text",},})
.then((input) => {
if (input !== null) {
swal(`You typed: ${input}`);
//Call ajax here
} else {
swal(`Is not delete`);
}
});
}
RequestUpload();
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>