前言
-
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 = type
return mainMessage(options)
}
})
export const message = mainMessage
2.在main.js引入
// 还是按照之前的写法一样写弹出框信息，但如果一直触发弹出框就只会提示一次，不会在页面堆叠
import { message } from './utils/resetMessage'总结：
经过这一趟流程下来相信你也对 vue-pc端Message 消息提示防抖处理-短时间内只触发一次 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！文章来源：https://www.toymoban.com/news/detail-638598.html
什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-638598.html
到了这里，关于vue-pc端Message 消息提示防抖处理-短时间内只触发一次的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
