场景：在某个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;
