vue中使用element-ui，重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中使用element-ui，重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 用这种

export const haslogin = { show: false }

if (!haslogin .show) {
        haslogin .show = true
        MessageBox.confirm('登录状态已过期', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }
        ).then(() => {
          haslogin .show = false
          store.dispatch('login/logout')
          router.push('/login')
        }).catch(() => {
          haslogin .show = false
        })
}
return Promise.reject('无效的会话或者会话已过期，请重新登录。')

/** 重置message，防止重复点击重复弹出message弹框 */
import {
  Message
} from 'element-ui'
let messageInstance = null
const resetMessage = (options) => {
  if (messageInstance) {
    messageInstance.close()
  }
  messageInstance = Message(options)
}
['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

文件中引入使用

if (res.data.code === 401) {
      resetMessage.error('无效的会话，或者会话已过期，请重新登录。')
      store.dispatch('login/logout')
      router.push('/login')
      return res
}

参考：

vue中使用element-ui，重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法_donggua_123的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-515260.html

到了这里，关于vue中使用element-ui，重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！