場景：在某個API接口中調用了ElementUI的Message方法，在加了loading的情況下，多次請求會重復調用Message方法。Message時間長會重疊，時間段看不清提示內容，很煩～～～～

這波是肉蛋蔥雞！！！！

吃了一波馬老師的肉蛋蔥雞后，產生了一個想法：重寫！！！，然后就有了下面這個東西。

回首掏，呦～鬼刀一開看不見，走位～走位～，手里干！！！難受～～～主要思路：重寫Message每種類型的參數默認值，根據 '.el-message' 類判斷message的個數，然后選擇是否繼續調用相同type的Message類中的方法

引入ElementUI，及其樣式

定義重寫class的唯一標識（ Symbol() ），作用是：作為對象屬性的唯一標識符，防止對象屬性沖突發生。也就是防止我們重寫的Message和ElementUI的Message沖突。

重寫Message每種類型參數默認值

export

main.ts 引入

## elementUI.ts // 引入 import ElementUI, { Message } from "element-ui"; import "element-ui/lib/theme-chalk/index.css";// 定義唯一標識 const customMessage = Symbol("customMessage");// 自定義Message class class CusMessage {// single默認值true，彈出一次success(options: any, single = true) {this[customMessage]("success", options, single);}warning(options: any, single = true) {this[customMessage]("warning", options, single);}info(options: any, single = true) {this[customMessage]("info", options, single);}error(options: any, single = true) {this[customMessage]("error", options, single);}// 類型調用 如：success =》 [customMessage]('success', options, true)[customMessage](type: any, options: any, single: any) {// 判斷每種type的Message是否只支持調用一次if (single) {// 全局查詢el-message類限制Message調用次數if (document.getElementsByClassName("el-message").length === 0) {// 調用ElementUI原生Message[type]方法傳入options參數Message[type](options);}} else {Message[type](options);}} }export const elementUI = ElementUI export const elementClass = new CusMessage()## main.ts import { elementUI, elementClass } from "@/utils/elementUI";Vue.use(elementUI); Vue.prototype.$message = elementClass;

總結

以上是生活随笔為你收集整理的全局修改elementui message 右边弹出_ElementUI 只允许 $message 提示一次的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。