vue-pc端Message 消息提示防抖处理-短时间内只触发一次

前言

• 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 消息提示防抖处理-短时间内只触发一次 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕