如何解决弹窗重复弹出

# Message

# 一. 使用

在 Vue 中使用 element 的 message 组件

在 Vue 文件中使用

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

1
2
3
4

在 js 文件中使用

import ElementUI from 'element-ui';

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

1
2
3
4
5
6
7

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

element_13

// 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) {
      // 判断是否已存在Message
      if (document.getElementsByClassName('el-message--error').length === 0) {
        Message[type](options);
      }
    } else {
      Message[type](options);
    }
  }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在有需要的地方引入

import DonMessage from '@/message';

js 文件中直接使用

DonMessage.warning('请登录');

挂载到vue原型上

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

1
2

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

1
2

#Element

上次更新: 2022/07/08, 17:40:08

← 消息提示组件高度固定方案→