哪些网站是动态的,高端网站建设成都,学做馒头面包哪个网站好,什么是域名解析服务前言 element提供的的message消息提示用确实方便直接代码就搞定。但是在特定的场景并不适用 点击某一个点位提示用户点击了或者websocket推送提示用户来信息了#xff08;这种提示用户场景#xff09; 如果有很多推送信息来#xff0c;或者用户一直点击。这是屏幕会一直弹…前言 element提供的的message消息提示用确实方便直接代码就搞定。但是在特定的场景并不适用 点击某一个点位提示用户点击了或者websocket推送提示用户来信息了这种提示用户场景 如果有很多推送信息来或者用户一直点击。这是屏幕会一直弹出message提示信息往下堆叠 并不友好而且还会把屏幕挡住。使得用户体验很不好我们应该对弹出框信息进行防抖处理 并且这种处理我们最好做加法这样原来在页面中写的message提示消息也不用二次修改
代码事项
1.在utils/工具文件下建立resetMessage.js文件-代码如下
/**重置message防止重复点击重复弹出message弹框 */
import { Message } from element-ui
let messageInstance null
let mainMessage function DoneMessage (options) {//如果弹窗已存在先关闭if (messageInstance) {messageInstance.close()}messageInstance Message(options)
}
let arr [success, warning, info, error]
arr.forEach(function (type) {mainMessage[type] function (options) {if (typeof options string) {options { message: options }}options.type typereturn mainMessage(options)}
})
export const message mainMessage
2.在main.js引入
// 还是按照之前的写法一样写弹出框信息但如果一直触发弹出框就只会提示一次不会在页面堆叠
import { message } from ./utils/resetMessage 总结
经过这一趟流程下来相信你也对 vue-pc端Message 消息提示防抖处理-短时间内只触发一次 有了初步的深刻印象但在实际开发中我 们遇到的情况肯定是不一样的所以我们要理解它的原理万变不离其宗。加油打工人 什么不足的地方请大家指出谢谢 -- 風过无痕
