优化elementUI的Message消息提示连续触发,满屏显示问题

elMessage.js

javascript 复制代码
import {Message} from 'element-ui'
const tipsEvent=(options)=>{
    console.log(document.querySelectorAll('.el-message'));
    const dom=document.querySelectorAll('.el-message')[0]
    if(dom==undefined){
        Message(options)
    }
}
const typeList=['success','error','info','warning']
typeList.forEach(item=>{
    tipsEvent[item]=options=>{
        const ele=document.querySelectorAll('.el-message')[0]
        if(ele==undefined){
            Message[item](options)
        }
    }
})
export const tips=tipsEvent

main.js中全局挂载

javascript 复制代码
import Vue from 'vue'
import {tips} from '@/utils/elMessage.js'

Vue.prototype.$message=tips;//在这里建议取相同的名称,因为是为了覆盖框架默认的this.$message

index.vue中使用

javascript 复制代码
<script>
    export default {
        name: 'index',
        methods: {
            handleTap(){
              this.$message({
                type:'warning',
                message:'警告提示触发了'
              })
            }
        }
    }
</script>
相关推荐
夏天要喝冰可乐几秒前
用 Gitee Go 搭建WorkBuddy云端定时任务
前端·ai编程
天天鸭32 分钟前
5 万处中文的老项目实现国际化,如何用架构思维完成改造?
前端·javascript·架构
程序员黑豆40 分钟前
鸿蒙应用开发之持久化存储解析:PersistentStorage / PersistenceV2 / preferences 选型与实战
前端·harmonyos
明月_清风1 小时前
🚀 OpenAI 数据代理架构全解析:从 600 PB 到自然语言的六层上下文工程
前端·后端·架构
明月_清风1 小时前
🚀 从 Foundry 到 AIP:Palantir 发生了什么变化?一篇文章全搞懂
前端·后端
西门啐血1 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
涛涛ing1 小时前
2026 上半年,前端圈已经炸了五次
前端
hunterandroid1 小时前
Android 后台任务可靠性排查:从 WorkManager 观测到失败重试闭环
android·前端
skiyee1 小时前
🔥 oiyo & unibest = 又新又好的 uniapp 模板
前端·uni-app
xingren1 小时前
「眨眼」UI 特效 - 在 Winform/WPF/WinUI3/Avalonia/Web 的实现
前端