首页 > 其他分享 >vue3 el-message组件封装

vue3 el-message组件封装

时间:2024-09-13 16:25:10浏览次数:3  
标签:el 封装 提示 vue3 组件 ElMessage message 弹窗 页面

背景

封装请求拦截器时,使用ElMessage进行弹窗提示成功或失败,但是如果页面用到多个接口,这时就会导致页面出现很多弹窗,导致用户体验不好,有可能出现卡顿现象。

这时就需要进行一些判断,如果前面的ElMessage还没关闭并且类型是一致的就return,不再弹窗提示,类型不一致时就要弹窗提示

类似下面的代码

使用 elment ui 或者 element-plus 的时候,使用里面的弹窗组件,在同一按钮多次点击的时候,会触发很多次这个弹窗,看着很不舒服

标签:el,封装,提示,vue3,组件,ElMessage,message,弹窗,页面
From: https://blog.csdn.net/weixin_43285360/article/details/142126049

相关文章

  • Help:R markdown文档无法运行代码
    在markdown文档中,sourcepane的代码运行不了(就是run代码框的代码,不会运行,在console中也没有相应的运行记录),但是把代码粘贴到console中运行又是可以的。此外,在这种情况下,Rscript中的sourcepane是可以提交代码并且运行的。有时候一打开Rstudio就会这样,有时候跑一段时间的代......
  • 保姆级,手把手教你物理机搭建Redis-sentinel(哨兵)集群
    集群介绍        Redis,作为一种开源的、基于内存的数据结构存储系统,被广泛应用于各种场景,包括缓存、消息队列、短期存储等。单一实例的工作模式通常无法保证Redis的可用性和拓展性,Redis提供了三种分布式方案:主从模式哨兵模式集群模式      主从模式    ......
  • 标准的vue3 elementplus格式,不用export default
    <template><div><!--查询表单--><el-form:inline="true":model="filters"class="demo-form-inline"><el-form-itemlabel="产品料号"><el-inputv-model="filters.......
  • 资产定位 | 合宙Air201模组LuatOS快速入门01-hello world
    合宙的Air201模组,功耗低,品质稳定,购买样品也方便,且资料全开放。问题是:用合宙的Air201模组,直接开发OpenCPU的应用,够方便吗?可以不用熟悉繁琐的环境搭建吗?可以不用关注繁琐的编译选项吗?可以不用关心繁琐的C语言陷阱吗?可以用寥寥几行代码,就完成模组对外设的控制,和服务器的......
  • 保持使用全局 HttpClient,但确保不同请求的 HttpRequestMessage 独立
    保持使用全局HttpClient,但确保不同请求的HttpRequestMessage独立这是推荐的最佳实践,因为HttpClient是设计为可重用的,你可以使用独立的HttpRequestMessage来确保每个请求有独立的请求头,而不影响其他请求。 privatestaticreadonlyHttpClientclient=newHtt......
  • DELL戴尔PowerEdge服务器PERC阵列Failed离线Offline数据恢复RAID
    针对DELL戴尔PowerEdge服务器中PERC阵列出现Failed离线或Offline状态的数据恢复问题,以下是一个详细的恢复流程和注意事项:一、初步评估与诊断确认故障现象:1.登录服务器管理界面,检查PERC阵列的状态,确认是否显示为Failed、Offline或其他异常状态。记录所有相关的错误信息和日志,以......
  • uni-app vue3获取 小程序胶囊最新的方法
    1.第一步app.vue<scriptsetup> import{onLaunch}from'@dcloudio/uni-app'; onLaunch(()=>{ //获取胶囊按钮的位置 constbuttonPositon=uni.getStorageSync('buttonPositon') if(!buttonPositon){ constres=uni.getMenuButtonBoun......
  • 开发指南029-el-table-column对齐属性
    按开发文档和正常理解,el-table-column具有属性align,可以填left,center,right控制内容的对齐方式。你真正做的时候,就会发现根本不起作用。    查网络,大部分怀疑你用错属性了,elment-ui版本不对,css冲突等等。    还有这样的解决方案:el-table增加 :cell-style=“{textAli......
  • VUE框架Vue3组件传送实现模态窗口切换------VUE框架
    <template><divclass="s1"><h1>我是App组件</h1><YeYe></YeYe></div></template><script>importYeYefrom"./components/YeYe.vue";exportdefault{name......
  • Apache SeaTunnel Committer 进阶指南
    ApacheSeaTunnel作为一个开源的数据集成工具,旨在简化和加速海量数据的采集和传输。社区的Committer是指拥有项目存储库的写权限的社区成员,即Committer可以自行修改代码、文档和网站,也可以合并其他成员的贡献。成为ApacheSeaTunnelCommitter没有严格的规则,实际上,新Comm......