重写element-ui中的Message，实现相同消息提示只弹一个

最新推荐文章于 2025-02-20 11:50:29 发布

Linhoon学习笔记

最新推荐文章于 2025-02-20 11:50:29 发布

阅读量3k

点赞数 8

分类专栏： vue javascript 文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/Linho/article/details/105856686

版权

javascript 同时被 2 个专栏收录

9 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文介绍如何解决Element UI中message频繁重复显示的问题，通过重写message方法，实现只在页面上显示唯一的消息，避免同一消息在短时间内多次弹出，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui中的message在实际使用过程中很多时候会遇到，相同的message会在短时间内同时出现在页面上，这种情况下是没有必要的。比如一个错误信息提示被放在定时器中进行：定时调用某个接口，然后这个接口会返回一个message的话，在定时器时间设置很短的情况下，就会出现短时间内弹出很多相同的message。我们可以通过重写element-ui的message来解决这个问题。

1.新建一个js文件，比如element_api.js

/* eslint-disable */
import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')
/**
 * 封装element-ui message方法，只有在页面没有message或者没有相同message的情况下才弹出该message
 */
class ElMessage {
  success (options, single = true) {
    this[showMessage]('success', options, single)
  }
  warning (options, single = true) {
    this[showMessage]('warning', options, single)
  }
  info (options, single = true) {
    this[showMessage]('info', options, single)
  }
  error (options, single = true) {
    this[showMessage]('error', options, single)
  }
  /* eslint-disable */
  [showMessage] (type, options, single) {
    console.log('message options:',options)
    if (single) {
      //获取页面所有已经存在的message
      let doms = document.getElementsByClassName('el-message');
      //el-message__content
      //设置值控制显示当前message
      let canShow = true;
      //遍历获取到的message DOM集合
      for( let i=0; i<doms.length; i++){
        //如果页面已存在的message中有显示文本和当前message相同的情况，canShow设置为false
        if(options == doms[i].getElementsByClassName('el-message__content')[0].innerHTML){
          canShow = false;
        }
      }
      //如果页面不存在message或者canShow==true，则正常执行该message
      if(doms.length === 0 || canShow){
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}

export {
  ElMessage
}

2.使用方法

(1) 作为vue实例的属性来调用，跟element一样

//在main.js中引入
import { ElMessage } from '@/assets/js/element_api.js'
Vue.prototype.$message = new ElMessage()
//接下来就可以在组件通过 this.$message    的方式调用了

(2) 直接使用,比如我在axios拦截器js文件中使用

import { ElMessage } from '@/assets/js/element_api.js'
let Message = new ElMessage()

//使用
// http响应拦截器
axios.interceptors.response.use(res => {
  if(res.data.error == 5004){
    //登录失效
    Message.error('登录失效，请重新登录!')
    router.push('/')
  }
  return res
},