解决Element UI 多次弹出message消息提示的问题

这篇具有很好参考价值的文章主要介绍了解决Element UI 多次弹出message消息提示的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用element ui 的提示信息,可能会出现以下场景,多次的提示信息,影响使用感受。

解决Element UI 多次弹出message消息提示的问题,ui,javascript,开发语言

 解决方法:

1、重写 resetMessage.js,具体如下:

在src/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、main.js中引入重写的 resetMessage.js

import { message } from '@/utils/resetMessage'

Vue.use(ElementUI)

注意: Vue.prototype.$message = message  一定要放在 Vue.use(ElementUI) 后面。
Vue.prototype.$message = message

 3、调用的方法

 this.$message.success('复制成功')文章来源地址https://www.toymoban.com/news/detail-599528.html

到了这里,关于解决Element UI 多次弹出message消息提示的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法

    1. 用这种 2. 参考: vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法_donggua_123的博客-CSDN博客

    2024年02月11日
    浏览(49)
  • 自动导入element-ui的Message等提示方法

    最近看element-plus文档的时候发现了组件可以自动导入,详情见这里,使用的是 unplugin-vue-components 和 unplugin-auto-import 。 其实element-ui也是支持的, unplugin-vue-components 的文档有说明。 对于element-ui,只是引入组件的话,还不需要引入 unplugin-auto-import 。一些提示方法,如 Message ,

    2024年02月09日
    浏览(42)
  • 解决IDEA中element-ui标签没有代码提示问题

    一.所遇问题 安装完 element-ui 后发现警告 \\\"Unknown html tag el-button\\\" ,且标签 没有代码提示 ,但依旧能够正常运行 二.解决方法 方法一:打开项目下的 node_modules ,找到 element-ui ,右击点击 Include JavaScript files 方法二:右击目录 node_modules ,把node_modules取消排除  解决后:

    2024年02月11日
    浏览(41)
  • vue2与vue3项目中,分别使用element组件的message消息提示只出现一次的实现

    比如出现以上现象,想要让上一次提示没有结束,下一次提示不会出现就可以用以下方法解决 解决后的现象一:上一次提示框显示后,提示框出现的提示时间没有结束,再次点击,提示框不会有反应,在该提示的时间内一只显示,下一次提示不会出现,直到该提示的时间过了

    2024年02月02日
    浏览(41)
  • 解决Vue+Element-UI 进行From表单校验时出现了英文提示问题

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 在使用 form 表单时,往往会对表单字段进行校验,字段为必填项时会添加 required 属性,此时自定义 rules 规则时就会需要表单输入框输入数据删除为空时,出现英文校验提示信息 代码如下: 将requ

    2024年02月14日
    浏览(52)
  • 解决element-ui按需引入使用message报错

     报错如上图所示 接下来告知解决方法 ,下方操作均在main.js中   在单独按需引入element组件时,message组件需要挂载到Vue全局对象上,而不是用 Vue.use(Message) ,这是message组件与其他组件不同的地方。其中与之相同、需要挂载到Vue全局对象上的,还有confirm组件。

    2024年02月11日
    浏览(50)
  • 解决element -ui 中message在dialog遮盖层下面

    最简单的方法: 在标签上加入 :z-index=\\\"1000\\\"  因为消息弹窗的 z-index 一般在2001,而对话框的 z-index 在3000左右。字需要降低层级即可 效果图  

    2024年02月12日
    浏览(41)
  • 解决edge关闭更新后弹出“无法更新”提示的问题

    利用诸多教程关闭edge更新后,每次打开edge的第一个窗口都会弹出如下图提示,若是此时正在输入或按下回车则会被此窗口逼疯······ 解决方法并不困难却少有教程,本文作为初步总结与补充,参考网址: [1] https://zhuanlan.zhihu.com/p/481696765  [2] https://www.bilibili.com/read/cv117

    2024年02月04日
    浏览(55)
  • WPF Flyout风格动画消息弹出消息提示框

    效果如图: XAML: C#: 调用控件:

    2024年02月09日
    浏览(41)
  • Element UI进行表单校验的时候,输入正确内容后,还有提示问题

    自己在进行表单验证时,明明输入了内容并且格式也正确,但是提示信息一直提示,在网上看了其它博主的文章解决了问题(字母写错啦真是脑残)在这里总结一下 出错原因:     1.看看你的el-form 是否绑定了值model并且model后面的名称是否和你后面表单输入时使用的名称相同

    2024年02月05日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包