antdmessage使用_关于vue\react使用element\antd整合message消息提示

当在开发过程中进入页面请求多个接口，多条信息吐丝的现象

QQ截图20200827205943.png

感觉就是很不得劲儿，眼花撩乱的！

以element-ui做示范

建一个msgStore.js文件

import { Message } from "element-ui";

class StorageApi {

static errorList = []; // 获取所有的消息 进行存储

static Iserr = false; // 状态判断显示消息窗口

// 消息处理

static setErrorMessage(statusName, contentMsg) {

let _this = this;

if (!_this.errorList[statusName]) {

_this.errorList[statusName] = new Array();

}

_this.errorList[statusName].push(contentMsg);

setTimeout(function() {

let error= SessionStorageApi.getErrorMessage();

if (error) {

if (!_this.Iserr) {

_this.Iserr = true;

Message({

dangerouslyUseHTMLString: true,

message: error,

type: "error",

duration: 5 * 1000,

onClose: (instance: any) => {

_this.Iserr = false;

SessionStorageApi.removeErrorMessage();

},

});

}

}

}, 1000);

}

// 进行样式排版

static getErrorMessage() {

if (this.errorList && Object.keys(this.errorList).length > 0) {

let contentMsg = "";

for (let i in this.errorList) {

if (i == "500") {

for (let e of this.errorList[i]) {

contentMsg += e + "
";

}

} else if (i == "404") {

contentMsg = this.errorList[i][0] + "
";

} else {

contentMsg += this.errorList[i][0] + "
";

}

}

return contentMsg;

}

}

static removeErrorMessage() {

this.errorList = [];

}

}

export default StorageApi;

在需要进行message的地方进行引入

import StorageApi from "@/api/StorageApi.ts";

// 需要做提示信息的地方

StorageApi.setErrorMessage(

"error",

"服务器没返回，请与管理员联系"

);