Vue3+sweetalert2消息提示类
为了快速编写信息提示代码,封装如下
core\helper中增加swalMessage.ts,代码如下
代码
import Swal from "sweetalert2"
declare interface SwalMessage {
success(title:string,msg:string);
error(title:string,msg:string);
info(title:string,msg:string);
question(title:string,msg:string);
confirm(title:string,msg:string, callback: any);
}
export default {
success(title:string,msg:string=''){
return Swal.fire({
title: title,
text: msg,
icon: "success",
buttonsStyling: false,
confirmButtonText: "确定",
heightAuto: false,
timer:1500,
customClass: {
confirmButton: "btn fw-semobold btn-light-primary",
},
})
},
error(title:string,msg:string=''){
return Swal.fire({
title: title,
text: msg,
icon: "error",
buttonsStyling: false,
confirmButtonText: "确定",
heightAuto: false,
timer:1500,
customClass: {
confirmButton: "btn fw-semobold btn-light-danger",
},
})
},
info(title:string,msg:string=''){
return Swal.fire({
title: title,
text: msg,
icon: "info",
buttonsStyling: false,
confirmButtonText: "确定",
heightAuto: false,
timer:1500,
customClass: {
confirmButton: "btn fw-semobold btn-light-info",
},
})
},
question(title:string,msg:string=''){
return Swal.fire({
title: title,
text: msg,
icon: "question",
buttonsStyling: false,
confirmButtonText: "确定",
heightAuto: false,
timer:1500,
customClass: {
confirmButton: "btn fw-semobold btn-light-info",
},
})
},
confirm(title, msg, callback: any){
return Swal.fire({
title: title,
icon: "question",
text: msg,
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText: `确定`,
cancelButtonText: `取消`,
}).then((result)=>{
if (result.value) {
callback();
}
})
},
}
使用
swalMessage.success('登录成功!').then(f=>{
//提示完成后,继续执行的代码
})
swalMessage.confirm('确定删除?','一旦操作,不可恢复',function (){
ApiService.delete(url.InfoGroupDelete+'?id='+id)
.then(({data}) => {
//当为确认的时候执行的代码
swalMessage.success("操作成功!")
})
.catch(({response}) => {
});
})
本文来自博客园,作者:静坐仰望星空,转载请注明原文链接:https://www.cnblogs.com/itljf/p/18200760