Vue-pc message prompt anti-shake processing - only trigger once in a short period of time

foreword

• The message message provided by element is really convenient and can be done directly with code. But it is not applicable in certain scenarios

• Click on a certain point to prompt the user to click or websocket push to prompt the user to receive information (this prompts the user scenario)

• If there are a lot of push information coming, or the user keeps clicking. This is the screen will keep popping up message prompts stacking down

• Not friendly and will block the screen. It makes the user experience very bad, we should perform anti-shake processing on the pop-up box information

• And we'd better add this kind of processing, so that the message prompt message originally written on the page does not need to be modified twice

code matters

1. Create a resetMessage.js file under the utils/tools file - the code is as follows

/**重置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. Introduce in main.js

// 还是按照之前的写法一样写弹出框信息，但如果一直触发弹出框就只会提示一次，不会在页面堆叠
import { message } from './utils/resetMessage'

---

Summarize:

After this process, I believe you also have a preliminary deep impression on the anti-shake processing of the message prompt on the vue-pc side - only trigger once in a short period of time, but the situation we encounter in actual development is definitely different. So we have to understand its principle, and it is always the same. Come on, hit the workers!

Please point out any deficiencies, thank you -- Fengguowuhen