一、遇到的问题

Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示，但是公司的测试人员在进行测试时会一直点，然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况（毕竟客户不会闲着没事一直点点点，而且就算出现了也只是不太好看，对功能什么的都没什么影响），但既然测试提出来了那还是要解决的。

最开始查了下Element UI的官方文档，发现确实没提供只弹出一次的功能。其他的如MessageBox和Notification都不太符合要求，更重要的是Message已在项目中大量存在，如果不能在全局解决的话，修改成本实在是太高昂了 。

二、解决方案：

在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 = 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)}[showMessage] (type, options, single) {if (single) {// 判断是否已存在Messageif (document.getElementsByClassName('el-message').length === 0) {Message[type](options)}} else {Message[type](options)}}
}
export default new DonMessage()

在有需要的地方引入

import DonMessage from '@/message'

js文件中直接使用

DonMessage.warning('请登录')

挂载到vue原型上

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

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

刷新页面，无论点击多少次让Element UI的Message消息提示弹出一个相关推荐

element ui 弹窗遮罩层在弹出层的上面。点击关闭弹窗弹窗关闭了但是遮罩层没关
首先弹窗一个水平测试报告.然后点击查看解析又可以弹窗一个框这时我们发现这个解析的框被外面一个遮罩层挡住了. 我把这个水平测试报告的弹窗写在一个组件里面.在组件里面又写了解析的弹窗. 首先查看官网的e ...
当session失效后，无论点击那个页面，都找到顶端页面，跳到登录页面。
当session失效后,用户点击当前页面会跳到登录页面,如果用户现在是在子页面,则当前的子页面跳到登录,用户感觉很不好,所以进行处理,例得无论点击那个页面,都找到顶端页面,再跳到登录页面. 处理的方式 ...
js 弹出一个页面 html页面刷新,原生js刷新当前页面与跳转页面的几种方法及区别总结...
在面向浏览器的web开发过程中,我们经常与JavaScript打交道,web开发页面路由跳转.刷新当前页面更是经常遇到的事.浏览器提供了至少3-5种的方式可以实现当前页面刷新或者跳转当前应用的其他页面 ...
ASP.NET查询页面设置form的action属性只弹出一个页面，并且每次将页面设置到最前...
背景当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的查询条件后,点击[查询]按钮,系统就弹出一个新的页面展示出根据条件查询出的数据集. 然后,用户每点[ ...
【CSS实现Loading遮罩】点击按钮，弹出一个DIV层窗口
加载中 gif 图片: 页面效果: 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
单击按钮弹出一个页面，并使背景颜色变为灰色
当你单击新增按钮时,不需要切换页面,而是在页面上弹出一个新增页面,并使背景颜色变为灰色,效果如下: html: <div class="Popup-MaskData"> ...
html点击按钮弹出悬浮窗_9种实现点击一个链接弹出一个小窗口的代码
9 种实现点击一个链接弹出一个小窗口的代码因为着是一段 javascripts 代码, 所以它们应该放在之间. 是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来.要 ...
点击登录按钮，弹出一个登录框
点击登录按钮,弹出一个登录框首先将登录框写在一个div块里,里面放上登录框所需的各种信息,比如用户名.密码等,并将CSS样式里的display设置成none.然后在你的前端页面,比如index.ht ...
%matplotlib inline是jupyter notebook里的命令, 意思是将那些用matplotlib绘制的图显示在页面里而不是弹出一个窗口
%matplotlib inline是jupyter notebook里的命令, 意思是将那些用matplotlib绘制的图显示在页面里而不是弹出一个窗口终端输入jupyter notebook, ...

刷新页面，无论点击多少次让Element UI的Message消息提示弹出一个

一、遇到的问题

二、解决方案：

在vue中使用Element的message组件

解决消息弹窗重复显示

刷新页面，无论点击多少次让Element UI的Message消息提示弹出一个相关推荐

最新文章

热门文章