优化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>
相关推荐
eidnxndrdkdns7 分钟前
PE 自校验的三个坑:恒失败、基址变化、以及被漏在外面的检测器
前端
90后的晨仔11 分钟前
解决 Android 构建报错:Unable to delete file .../file-map.txt
android·前端
Yuhano16 分钟前
W4. RAG 让 Agent 拥有"外部记忆"
前端·aigc
用户308169987648519 分钟前
gzip 和 br 压同一份 JSON:7.6MB 压到 175KB,差 3.8 倍
前端
掘金者阿豪29 分钟前
电商视觉要被 Agent 重做了:一个平台跑通主图、详情页、实拍、复刻和视频
前端
爱勇宝41 分钟前
《道德经》第 13 章:别让评价系统控制你的心
前端·后端·产品
掘金者阿豪1 小时前
集中式与分布式数据库怎么选?从架构原理到电科金仓的实践思考
前端·后端
codeejun1 小时前
每日一Go·MySQL-11、覆盖索引 & 回表原理
javascript·数据库·mysql
墨林陌1 小时前
AI 热点日报(2026-11-06):乌镇峰会闭幕发布全球开源AI倡议,腾讯混元Hy4发布即开源
前端
用户298698530142 小时前
React 前端将 Excel 工作表导出为图片的技术实践
javascript·react.js·excel