首页 > 其他分享 >Vue3+sweetalert2消息提示类

Vue3+sweetalert2消息提示类

时间:2024-05-19 21:09:18浏览次数:19  
标签:btn false string title 提示 Swal Vue3 msg 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}) => {
      });
})

标签:btn,false,string,title,提示,Swal,Vue3,msg,sweetalert2
From: https://www.cnblogs.com/itljf/p/18200760

相关文章

  • Vue3使用vue-cropper截图上传
    !!!!!!!已使用另一个截图上传工具,稍后更新博客!!!!!!使用vue-cropper进行截图上传先安装npmivue-cropper编写组件在components中添加imageCropper.vue代码如下<template><div><div><imgv-if="value"class="mb-2"style=&......
  • Vue3使用SM国产加密库
    npm安装npminstall--savesm-crypto//使用import{sm2,sm3,sm4}from'sm-crypto'//-----------sm2--------------------//获取密钥对letkeypair=sm2.generateKeyPairHex()publicKey=keypair.publicKey//公钥privateKey=keypair.privateKey//私钥//......
  • Vue3+axios+.Net使用分片上传
    Vue3+axios+.Net使用分片上传前端代码在ApiService.cs中增加方法//上传文件publicstaticasyncuploadFile(file){constchunkSize=1024*1024;//1MB每1mb分片consttotalChunks=Math.ceil(file.size/chunkSize);letkey='';lettag=true;leturl=......
  • Vue3报错:已声明“upperName”,但从未读取其值。ts-plugin(6133)
    Vue3报错:已声明“upperName”,但从未读取其值。ts-plugin(6133)报错显示:类型“StoreToRefs<Store<"count",{sum:number;name:string;address:string;},{},{increment(value:number):void;}>>”上不存在属性“upperName”。ts-plugin(2339)相关代码:vue文件:con......
  • VUE速通(10)Vue3核心语法(2)setup
    1setup概述setup是Vue3中一个新的配置项,值是一个函数,它是CompositionAPI“表演的舞台”,组件中所用到的:数据、方法、计算属性、监视......等等,均配置在setup中。特点如下:setup函数返回的对象中的内容,可直接在模板中使用。setup中访问this是undefined。setup函数会......
  • 关于cmd运行javac提示'javac' 不是内部或外部命令,也不是可运行的程序的问题
     大家可以看到我这边cmd运行javac命令,它对我进行了错误的提示,提示javac不是可运行命令和程序。这个问题的根本在于环境变量的配置出现了错误。接下来就要进行jdk的环境配置了。  注意点:这里要定位到自身存放jdk的bin目录才会生效。  点击确定即可,然后打开cmd窗口......
  • VSCode安装vue3插件
    1.以前的volar已经弃用了。2.最近vue插件 3.安装好插件后,在vscode中创建项目可能会报错。解决方法:1.使用window+r调出cmd,运行node-v,npm-v都没问题。那么尝试以管理员方式运行vscode,如果还是不行,重启一下电脑。2.网络原因,网络波动或者网比较差的时候导致下载丢包,把node......
  • Docker启动 Redis提示:Can't initialize Background Jobg
     今天使用docker启动redis失败,但是查看容器日志,除了提示Fatal:Can'tinitializeBackgroundJobg,没有其他错误信息。经过长时间查找资料及试错,现记录下可能的产生原因及解决方案,以便以后参考。产生原因:宿主机安装的docker版本太低,同镜像所需的版本不匹配解决方案: 方案1、......
  • 基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」
    vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件uv3-table:一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。如下图:H5+小程序+App端,多端......
  • 执行npm run serve有时提示npm update check failed
    背景:这个错误虽说无关紧要,但有时候会出现就感觉不爽。错误提示: 解决方法:在网络上查阅资料后才知道是因为文件夹权限的问题(1.)删除目录configstore由于权限问题,该目录经常出现故障。如果删除该目录,则下次运行命令时将重新生成该目录。(2.)在Windows上删除......