iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Element的Message弹窗重复弹出问题解决
  • 842
分享到

Element的Message弹窗重复弹出问题解决

2024-04-02 19:04:59 842人浏览 泡泡鱼
摘要

目录一. 使用二. 解决消息弹窗重复显示一. 使用 在 Vue 中使用 element 的 message 组件 在 Vue 文件中使用 this.$message({ me

一. 使用

Vue 中使用 element 的 message 组件

在 Vue 文件中使用


this.$message({
  message: "提示信息",
  type: "success"
})

js 文件中使用


import ElementUI from 'element-ui';

ElementUI.Message({
  message: '提示信息',
  type: 'warning'
});

二. 解决消息弹窗重复显示


// message.js

import { Message } from 'element-ui';

const showMessage = Symbol('showMessage');

class DonMessage {
  success (options, single = false) {
    this[showMessage]('success', options, single);
  }
  warning (options, single = false) {
    this[showMessage]('warning', options, single);
  }
  info (options, single = false) {
    this[showMessage]('info', options, single);
  }
  error (options, single = true) {
    this[showMessage]('error', options, single);
  }

  [showMessage] (type, options, single) {
    if (single) {
      // 判断是否已存在Message
      if (document.getElementsByClassName('el-message--error').length === 0) {
        Message[type](options);
      }
    } else {
      Message[type](options);
    }
  }
}

// 默认导出 私有 Message 组件
export default new DonMessage();

在有需要的地方引入


import DonMessage from '@/message' 

js 文件中直接使用


DonMessage.warning('请登录') 

挂载到vue原型上


// main.js 
Vue.prototype.$message = DonMessage 

// vue文件中调用
this.$message.warning("请登录")

到此这篇关于Element的Message弹窗重复弹出问题解决的文章就介绍到这了,更多相关Element的Message弹窗重复弹出内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Element的Message弹窗重复弹出问题解决

本文链接: https://www.lsjlt.com/news/134732.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Element的Message弹窗重复弹出问题解决
    目录一. 使用二. 解决消息弹窗重复显示一. 使用 在 Vue 中使用 element 的 message 组件 在 Vue 文件中使用 this.$message({ me...
    99+
    2024-04-02
  • 如何解决layui弹窗按enter键不停弹窗的问题
    这篇文章主要为大家展示了“如何解决layui弹窗按enter键不停弹窗的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决layui弹窗按enter键不...
    99+
    2024-04-02
  • elementUI弹窗里的表单重置不生效问题解决
    还有最后一个小模块项目马上就做完了,最一个模块比较简单,还是一个表格,表格每一行的最后有两个按钮,修改和删除,新增按钮则在表格外面。点击修改和新增按钮可以弹出一个表单弹窗。修改可以回...
    99+
    2023-05-17
    element 表单重置不生效 element 表单重置
  • python selenium运行时弹出窗口问题怎么解决
    本篇内容主要讲解“python selenium运行时弹出窗口问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“python selenium运行时弹出窗口问题怎么解...
    99+
    2023-06-21
  • Vue+Element-ui弹窗 this.$alert is not a function问题
    目录Vue Element-ui弹窗 this.$alert is not a function使用问题解决办法Vue element-ui 弹窗使用遇到的问题解决代码如下Vue E...
    99+
    2022-11-13
    Vue Element-ui弹窗 Vue Element-ui Vue弹窗Element-ui
  • vue中如何解决使用element ui弹窗与echarts之间的问题
    这篇文章将为大家详细讲解有关vue中如何解决使用element ui弹窗与echarts之间的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。今天项目中有个需求,就是在...
    99+
    2024-04-02
  • Python PyQt5中弹出子窗口解决子窗口一闪而过的问题
    方式一:槽函数中创建子窗口对象,赋值到普通变量 在主窗口添加按钮,并把按钮信号关联槽,在槽函数中创建子窗口对象赋值到普通变量,并调用其 show 方法。 from P...
    99+
    2024-04-02
  • element弹窗表格的字体模糊bug解决
    目录背景问题分析产生的原因所以产生这样的根本原因是什么呢?解决的办法背景 有一个BUG,就是在使用element弹窗表格的字体异常的模糊。如下图: 这个问题其实已经存在很久了。客...
    99+
    2023-02-24
    element弹窗表格字体模糊 element弹窗bug
  • element弹窗表格的字体模糊如何解决
    这篇文章主要介绍了element弹窗表格的字体模糊如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇element弹窗表格的字体模糊如何解决文章都会有所收获,下面我们一起来看看吧。问题分析猜测是字体的问题,...
    99+
    2023-07-05
  • 关于pythonselenium运行时弹出窗口问题
    近期在做一个网页代填项目时,用到了python的selenium,虽然实现了代填功能但是每次运行时都会弹出窗口,初始是python窗口,后续改进了又弹出了driver的窗口。在我看来...
    99+
    2024-04-02
  • CSS DIV弹出层问题如何解决
    这篇文章主要讲解了“CSS DIV弹出层问题如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS DIV弹出层问题如何解决”吧!DIV弹出层问题解决方案一、关于如何让png背景在IE...
    99+
    2023-07-04
  • CSS中DIV弹出层问题怎么解决
    这篇文章主要讲解了“CSS中DIV弹出层问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中DIV弹出层问题怎么解决”吧!DIV弹出层问题解决...
    99+
    2024-04-02
  • 如何解决layer关闭弹出窗口触发表单提交的问题
    这篇文章主要介绍如何解决layer关闭弹出窗口触发表单提交的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、前言 表单的代码:<form>  此处理代码...
    99+
    2024-04-02
  • 如何解决layer弹层遮罩挡住窗体的问题
    这篇文章主要介绍如何解决layer弹层遮罩挡住窗体的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!使用代码:<div>    <d...
    99+
    2024-04-02
  • C# wpf解决Popup弹出位置异常问题解决
    目录问题描述原因分析解决方法问题描述 使用Popup控件作为弹出框,使用相对位置弹出即Placement=“Relative”,在不同的设备中弹出的位置不一致。比如下面的例子。 使...
    99+
    2024-04-02
  • 解决element DateTimePicker+vue弹出框只显示小时
    三个知识点: 1.css 后代选择器 https://www.w3school.com.cn/css/css_selector_descendant.asp 2.vue深度选择器 h...
    99+
    2024-04-02
  • layer.js向弹出框传值问题怎么解决
    这篇文章主要介绍“layer.js向弹出框传值问题怎么解决”,在日常操作中,相信很多人在layer.js向弹出框传值问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”layer.js向弹出框传值问题怎...
    99+
    2023-07-04
  • vue弹窗里面使用echarts不显示的问题及解决
    目录前言原因分析解决方式一、nextTick二、setInterval总结前言 弹出层中插入echarts图表,没有报错,但是图表加载不出来 此弹出层没有用element 的dial...
    99+
    2023-01-28
    vue弹窗 使用echarts不显示 vue echarts不显示
  • 如何解决win10系统不断弹出fodhelper.exe的问题
    这篇文章将为大家详细讲解有关如何解决win10系统不断弹出fodhelper.exe的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。win10系统不断的弹出fodhelper.exe怎么办首先“win...
    99+
    2023-06-10
  • 解决Jupyter-notebook不弹出默认浏览器的问题
    写给自己 1. 首先,确定你的问题是:Jupyter-notebook可以正常运行,但是不弹出默认浏览器,例如下图(只有下图,浏览器死活没动静!): 解决方案: 1.电脑存在多个浏...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作