cozyalert
Provide out-of-the-box presets for sweetalert2.
Features
- 5 common presets (refer to MessageBox of element-plus)
- Allow single titleText parameter
Install
npm add cozyalert sweetalert2
Named export
import 'cozyalert/dist/style.css'
import { confirm, error, info, success, warning } from 'cozyalert'
// single titleText
success('configuration.titleText')
// or configuration object
success({
// ...
})
Default export
import 'cozyalert/dist/style.css'
import Swal from 'cozyalert'
// Use sweetAlert2 methods
Swal.fire({
title: 'Error!',
text: 'Do you want to continue',
icon: 'error',
confirmButtonText: 'Cool'
})
// Use cozyalert methods
Swal.success('bingo!')
Life Cycle
success('操作成功').then(() => {
// 关闭
})
info('提示').then(() => {
// 关闭
})
warning('警告').then(() => {
// 关闭
})
error('出错了').then(() => {
// 关闭
})
confirm('确认吗?').then(() => {
// 点击确认
}).catch((e) => {
if (e.isDenied) {
// 点击拒绝
}
else if (e.isDismissed) {
// 点击取消
}
})
Example: Coercive confirm
No cancel, must confirm.
confirm({
titleText: '同意以继续',
showCancelButton: false,
allowOutsideClick: false,
allowEscapeKey: false,
})
Example: Complex confirm
// form with async submitting
confirm({
input: 'text',
inputAttributes: {
placeholder: '备注'
},
confirmButtonText: '同意',
showLoaderOnConfirm: true,
preConfirm: (input) => {
return new Promise((resolve) => {
setTimeout(resolve, 500)
}).then(() => {
alert('同意成功')
}).catch((e) => {
alert('同意失败')
})
},
// 拒绝按钮
showDenyButton: true,
denyButtonText: '拒绝',
returnInputValueOnDeny: true,
preDeny: (input) => {
if (input) {
return new Promise((resolve, reject) => {
setTimeout(reject, 500)
}).then(() => {
alert('拒绝成功')
}).catch((e) => {
alert('拒绝失败')
})
}
else {
this.$swal.showValidationMessage('请填写备注')
return false
}
},
}).then((e) => {
alert('同意')
}).catch((e) => {
if (e.isDenied)
alert('拒绝')
else if (e.isDismissed)
alert('取消')
})