目錄

• 一. 使用
• 二. 解決訊息彈窗重複顯示

一. 使用

在 中使用 element 的 message 元件

在 Vue 檔案中使用

this.$message({
  message: "提示資訊",type: "success"
})

在 檔案中使用

import ElementUI from 'element-ui';

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

二. 解決訊息彈窗重複顯示

// message.js
/**
 * @Description: 重寫message掛載，實現 Class 的私有屬性
 * @param { String } optionwww.cppcns.com
 
s => 訊息內容
 * @param { Boolean } single => 是否只顯示一個
 */
import { Message } from 'element-ui';
http://www.cppcns.com
const showMessage = Symbol('showMessage');

class DonMessage {
  success (options,single = false) {
    this[showMessage]('success',options,single);
  }
  warning (options,single = false) {http://www.cppcns.com
 

    this[showMessage]('warning',single);
  }
  info (options,single = false) {
    this[showMessage]('info',single);
  }
  error (options,single = true) {
    this[showMessage]('error',single);
  }

  [showMessage] (type,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("請登入")lwncsRY

到此這篇關於Element的Message彈窗重複彈出問題解決的文章就介紹到這了,更多相關Element的Message彈窗重複彈出內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！