SweetAlert2 Preset 
5 out-of-the-box presets for sweetalert2, refer to MessageBox of element-plus.
⚠ DEPRECATED
Warning
SweetAlert2 Preset has been upgraded to faim by the the same author cloydlau
Not only are the capabilities enhanced, but for subsequent bug fixes and iterative optimization, please migrate as soon as possible
Install
Peer Dependencies
sweetalert2
NPM
npm i sweetalert2-preset sweetalert2import Swal from 'sweetalert2'
import SwalPreset from 'sweetalert2-preset'
Object.assign(Swal, SwalPreset)
Swal.fire()
Swal.success()
Swal.info()
Swal.warning()
Swal.error()
Swal.confirm()CDN + ESM
⚠ Not yet supported because
sweetalert2does not export ESM.
CDN + IIFE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2-preset"></script>
<script>
Object.assign(Swal, SwalPreset)
Swal.fire()
Swal.success()
Swal.info()
Swal.warning()
Swal.error()
Swal.confirm()
</script>
</body>
</html>Life Cycle
SwalPreset.success('Operation Success').then(() => {
// onClose
})
SwalPreset.info('Information').then(() => {
// onClose
})
SwalPreset.warning('Warning').then(() => {
// onClose
})
SwalPreset.error('Error Occurred').then(() => {
// onClose
})
SwalPreset.confirm('Are You Sure?').then(() => {
// onConfirmed
}).catch((e) => {
if (e.isDenied) {
// onDenied
} else if (e.isDismissed) {
// onDismissed
}
})Example: Coercive Confirm
No cancel, must confirm.
SwalPreset.confirm({
titleText: 'Confirm to continue',
showCancelButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
})Example: Complex Confirm
// form with async submitting
SwalPreset.confirm({
input: 'text',
inputAttributes: {
placeholder: 'Remark'
},
confirmButtonText: 'Agree',
showLoaderOnConfirm: true,
preConfirm: (input) => {
return new Promise((resolve) => {
setTimeout(resolve, 500)
}).then(() => {
alert('Agree Success')
}).catch((e) => {
alert('Agree Failed')
})
},
showDenyButton: true,
denyButtonText: 'Deny',
returnInputValueOnDeny: true,
preDeny: (input) => {
if (input) {
return new Promise((resolve, reject) => {
setTimeout(reject, 500)
}).then(() => {
alert('Deny Success')
}).catch((e) => {
alert('Deny Failed')
})
} else {
Swal.showValidationMessage('Please fill in the remark')
return false
}
},
}).then((e) => {
alert('Agreed')
}).catch((e) => {
if (e.isDenied) {
alert('Denied')
} else if (e.isDismissed) {
alert('Dismissed')
}
})Changelog
Detailed changes for each release are documented in the release notes