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

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

一. 使用在 Vue 中使用 element 的 message 组件
在 Vue 文件中使用

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

在 js 文件中使用

import ElementUI from 'element-ui'; ElementUI.Message({message: '提示信息',type: 'warning'});

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

文章图片

// message.js/** * @Description: 重写message挂载，实现 Class 的私有属性 * @param { String } options => 消息内容 * @param { Boolean } single => 是否只显示一个 */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) {// 判断是否已存在Messageif (document.getElementsByClassName('el-message--error').length === 0) {Message[type](options); }} else {Message[type](options); }}}// 默认导出私有 Message 组件export default new DonMessage();

在有需要的地方引入