重置 Message 消息提示

为了避免消息提示过多导致界面混乱，我们可以通过实现消息提示的重置机制，确保每次只显示最新的消息提示，从而提升用户体验。

导入 Message 组件

import { Message } from 'element-ui'

初始化变量

let messageInstance = null
let timer = null

定义 resetMessage 函数

const resetMessage = options => {
  if (!messageInstance) {
    messageInstance = Message({
      ...options,
      duration: 0
    })
  }
  clearTimeout(timer)
  timer = setTimeout(() => {
    resetMessage.close()
  }, options.duration || 3000)
}

提供关闭消息提示的方法

resetMessage.close = () => {
  if (messageInstance) {
    messageInstance.close()
    messageInstance = null
    clearTimeout(timer)
    timer = null
  }
}

扩展 resetMessage 函数

;['error', 'success', 'info', 'warning'].forEach(type => {
  resetMessage[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return resetMessage(options)
  }
})

导出 resetMessage

export default resetMessage

完整代码

import { Message } from 'element-ui'

let messageInstance = null
let timer = null

const resetMessage = options => {
  if (!messageInstance) {
    messageInstance = Message({
      ...options,
      duration: 0
    })
  }
  clearTimeout(timer)
  timer = setTimeout(() => {
    resetMessage.close()
  }, options.duration || 3000)
}

resetMessage.close = () => {
  if (messageInstance) {
    messageInstance.close()
    messageInstance = null
    clearTimeout(timer)
    timer = null
  }
}

;['error', 'success', 'info', 'warning'].forEach(type => {
  resetMessage[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = type
    return resetMessage(options)
  }
})

export default resetMessage