使用elementui请求多个接口重复弹窗报错
在项目开发过程中,经常遇到同时请求多个接口,其中有几个接口需要弹出错误信息,就像下图这样,导致几个错误信息重叠在一起。
对于这种情况,我们不想他们重叠展示,是否可以每次就只展示一个错误呢?带着这个疑问,我们开始编码。
我们可以新建一个变量messageUse
,用来记录是否有弹出信息提示,有的话我们关闭上一个弹出信息,弹出最新的消息提示,这样我们就可以每次只显示一个弹出信息了,赶紧来调用试试吧。
import messageToast from './message'
messageToast({ message: '我是错误信息一', type: 'error'})
messageToast({ message: '我是错误信息二', type: 'error'})
messageToast({ message: '我是错误信息三', type: 'error'})
代码执行,页面弹出信息如下图,这样,我们就实现了每次只弹出最后那一个错误信息了。
任务就这样结束了吗?并没有!我们在使用错误信息提示组件的时候,通常只需要this.$message.error('我是错误信息')
,那我们封装的messageToast
如何也能这样简洁的弹出提示信息呢?带着这个疑问,我们继续编码。
import { Message } from 'element-ui'
let messageUse = null
const messageToast = (options) => {
if (messageUse) {
messageUse.close()
}
messageUse = Message(options)
}
// 为messageToast添加四个提示框类型,判断传入的数据是否为字符串,是的话则可以判断为一段文本,我们直接修改options对象的message属性
['success', 'error', 'info', 'warning'].forEach(item => {
messageToast[item] = options => {
if (typeof options === 'string') {
options = {
message: options
}
}
options.type = item
return messageToast(options)
}
})
export default messageToast
这样我们就算大功告成了,在项目中就可以可以使用messageTost.error('我是错误信息')
来快捷的弹出信息了。