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) {
      // 判断是否已存在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弹窗重复弹出内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！