明星网站怎么设计,折扣网站模板,wordpress下载安装是英文,做企业网站需要哪些一、遇到的问题
Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示#xff0c;但是公司的测试人员在进行测试时会一直点#xff0c;然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况#xff08;毕竟客户不会闲着…
一、遇到的问题
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-uiconst 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(请登录)
