站酷网如何接单,建设银行网站可以查询存折吗,wordpress 阅读器,商务网官网场景#xff1a;在某个API接口中调用了ElementUI的Message方法#xff0c;在加了loading的情况下#xff0c;多次请求会重复调用Message方法。Message时间长会重叠#xff0c;时间段看不清提示内容#xff0c;很烦#xff5e;#xff5e;#xff5e;#xff5e;这波是…场景在某个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;
