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}) => {
      });
})
posted @ 2024-05-19 21:03  静坐仰望星空  阅读(87)  评论(0编辑  收藏  举报