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}) => {
      });
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章