解决elementui中message多次出现

这篇博客介绍了如何在Vue项目中创建并复用Element-UI的Message组件。通过在utils文件夹下创建resetMessage.js,实现了错误、成功、信息和警告四种类型的消息提示,并提供了两种调用方式:直接调用如`this.$message.error('验证失败')`和传入配置对象。这样可以避免全局引入Message,提高代码复用性和组织性。

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

1. 在utils 文件夹新建 resetMessage.js, 内容如下

备注(此文件参考大佬的, 如有侵权联系删除)

import {
  Message
} from 'element-ui';
let messageInstance = null;
const resetMessage = (options) => {
  if(messageInstance) {
    messageInstance.close()
  }
  messageInstance = Message(options)
};
['error','success','info','warning'].forEach(type => {
  resetMessage[type] = options => {
    if(typeof options === 'string') {
      options = {
        message:options
      }
    }
    options.type = type
    return resetMessage(options)
  }
})
export const message = resetMessage

2.调用(局部引入)

import {
  message
} from '@/utils/resetMessage';
Vue.prototype.$message = message;  
//取消之前的引入, 全局引入的话一定放在最后

3.使用

this.$message.error('验证失败')  //第一种使用方式
this.$message({
          message: '验证失败',
          type: 'error'
        });  //第二种方式
### 如何在 ElementUI 中使用 `nextTick` 方法 在 Vue.js 和基于其构建的框架如 ElementUI 中,`this.$nextTick()` 是一个非常有用的方法。当数据发生变化时,DOM 更新并不是立即发生的;而是被批量处理以提高性能。如果希望在 DOM 更新之后执行某些操作,则可以使用 `$nextTick(callback)` 函数,在下一次 DOM 更新循环结束之后调用延迟回调函数。 #### 使用场景 通常情况下,当修改了影响视图的状态后立刻想要获取最新的 DOM 结构或尺寸信息时需要用到此方法。比如动态调整元素样式、初始化第三方插件等都需要等待真实 DOM 完成渲染后再进行下一步动作[^1]。 #### 实际应用案例 下面是一个简单的例子来展示如何利用 `nextTick` 来确保某个特定时刻下的 DOM 已经完成更新: ```javascript // 假设我们有一个按钮点击事件处理器 handleClick() { this.message = 'New Message'; // 改变状态 this.$nextTick(() => { console.log(this.$refs.myElement.innerHTML); // 此处能获得到最新消息 "New Message" }); } ``` 在这个例子中,先改变了组件实例上的 message 属性值,接着通过 `this.$nextTick()` 注册了一个匿名函数作为回调参数传递进去。这样就保证了该回调会在本次异步队列清空前被执行,并且此时页面上已经反映了新的变化[^2]。 另外需要注意的是,如果你是在同步更改多个响应式的属性并且需要它们都生效以后再去访问 DOM ,那么应该只调用一次 `this.$nextTick()` 即可[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值