全局修改elementui message 右边弹出_ElementUI 只允许 $message 提示一次

场景：在某个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 提示一次相关推荐

element-ui中$confirm弹出框的确定和取消按钮互换位置
element-ui中$confirm弹出框的确定和取消按钮互换位置 (1)定位元素 (2)找到元素class,通过flex布局,进行位置更换 (3)app.vue中进行全局修改 /* 确认窗取消 ...
xp工作用计算机自能看见自己,XP系统弹出“无法查看工作组计算机”提示怎么办...
摘要腾兴网为您分享:XP系统弹出"无法查看工作组计算机"提示怎么办,优化大师,银联商务,易视云3,心视界等软件知识,以及博奥清单计价软件,沙孟海书法字体,六棱镜,动画编辑器,组织 ...
Vue消息弹窗不重复弹出，只弹出一次
消息弹窗不重复弹出,只弹出一次文章借鉴:让ElementUI Message消息提示每次只弹出一次 1.在utils里新建一个message.js 文件 /*** 重置message,防止重复点击重 ...
win10老是弹出计算机管理器,win10系统Ie11老是弹出“管理加载项”提示框取消的处理办法...
有时候可能会遇到对win10系统IE11老是弹出"管理加载项"提示框取消进行设置,如果我们需要对win10系统IE11老是弹出"管理加载项"提示框取消进行设置时 ...
php js对话框,JavaScript_js弹出框、对话框、提示框、弹窗实现方法总结(推荐)，一、JS的三种最常见的对话框- phpStudy...
js弹出框.对话框.提示框.弹窗实现方法总结(推荐) 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ==================== ...
JavaScript弹出框、对话框、提示框、弹窗总结
JavaScript弹出框.对话框.提示框.弹窗总结. 1.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 =================== ...
插入U盘老是弹出U盘扫描和提示修复提示怎么解决
插入U盘老是弹出U盘扫描和提示修复提示怎么解决参考文献:百度经验参考文献:百度经验解决参考步骤: 1.在电脑搜索框中输入服务找到 ShellHardware Detection,双击打开 ...
php点击文字弹出js提示框,js弹出框、对话框、提示框、弹窗实现方法总结(推荐)...
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
交换element-ui中$confirm弹出框的确定和取消按钮位置
使用element-ui的MessageBox组件时,用到了$confirm弹出框,它的默认样式是这样子的: 在项目开发中,为了保持风格的统一,UI给的切图都是确定在左,取消在右,且居中显示,类似如下 ...

全局修改elementui message 右边弹出_ElementUI 只允许 $message 提示一次

场景：在某个API接口中调用了ElementUI的Message方法，在加了loading的情况下，多次请求会重复调用Message方法。Message时间长会重叠，时间段看不清提示内容，很烦～～～～

吃了一波马老师的肉蛋葱鸡后，产生了一个想法：重写！！！，然后就有了下面这个东西。

全局修改elementui message 右边弹出_ElementUI 只允许 $message 提示一次相关推荐

最新文章

热门文章