优化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>
相关推荐
雪芽蓝域zzs2 分钟前
第三十二节:部门组织管理(el‑tree 组织树
前端·javascript·vue.js
leoZ23110 分钟前
第 7 篇:进阶——校验、联动、列表页
开发语言·前端·javascript·vue.js·人工智能·目标检测·ecmascript
VeryCool12 分钟前
别吹了,依赖图像识别的GPT‑6 Astra永远快不起来
前端·javascript·aigc
hunterandroid22 分钟前
Android 测试全景:从单元测试到 UI 自动化的完整实践
android·前端
leoZ23126 分钟前
第 8 篇:与 AI 协作的工作流 + 完整案例
前端·人工智能·神经网络·自然语言处理·性能优化·c#·php
背对疾风27 分钟前
提前还贷,缩短年限和降低月供其实是一样的
前端
2501_9289962236 分钟前
Agent 开发 API 选型:硅碳相变下 Function Calling 兼容性与多模型路由拆解
前端
invicinble39 分钟前
做数字产品的核心内容--数据的设计与展示
大数据·前端
LabVIEW开发39 分钟前
LabVIEW运行时动态修改控件标题
前端·labview·labview知识·labview功能·labview程序
晴天161 小时前
ES6+ 核心语法
前端·es6·状态模式