场景：在某个API接口中调用了ElementUI的Message方法，在加了loading的情况下，多次请求会重复调用Message方法。Message时间长会重叠，时间段看不清提示内容，很烦～～～～
这波是肉蛋葱鸡！！！！
吃了一波马老师的肉蛋葱鸡后，产生了一个想法：重写！！！，然后就有了下面这个东西。
回首掏，呦～鬼刀一开看不见，走位～走位～，手里干！！！难受～～～主要思路：重写Message每种类型的参数默认值，根据 '.el-message' 类判断message的个数，然后选择是否继续调用相同type的Message类中的方法
引入ElementUI，及其样式定义重写class的唯一标识（ Symbol() ），作用是：作为对象属性的唯一标识符，防止对象属性冲突发生。也就是防止我们重写的Message和ElementUI的Message冲突。重写Message每种类型参数默认值exportmain.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 提示一次的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
