一个页面请求多个接口时,如果多个接口返回异常或者错误时,message组件会多次弹出。这里对element-ui 的message组件做一层封装,防止此类问题出现
src/utils/resetMessage.js
/**重置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 const message = resetMessage
调用:
import { message } from "@/utils/resetMessage"
message({
message: error.response.data.message,
type: "error",
duration: 5 * 1000,
showClose: true
});
网友评论