自定义消息提示message

这个组件，antd是有的，因为项目要求的两个原因自定义
1:antd的message即使你设定消失时间1秒，鼠标悬浮在消息上,消息就不会消失
2:ts模式下,antd组件库的message组件的type(填任意一项就会有图标)为必填项,本项目存在不显示图标的情况
Message.ts

/*
 * @Name:自定义消息提示
 * @Author: 刘强
 * @Date: 2021-05-26 15:06:32
 * @LastEditors: 刘强
 * @LastEditTime: 2021-09-09 11:03:29
 * @Description:-引入ts后，antd组件库的message组件的type为必填项，不适用本项目
 * @type:default默认灰色,error,info
 */
// 错误码转换
import "../../../style/comm/message.less";
const errText = {
	'the server responded with a status of 403': '服务器的响应状态为403',
	'the server responded with a status of 404':'服务器的响应状态为404',
	'Request failed with status code 504': '请求失败，状态代码504',
	'Request failed with status code 503': '请求失败，服务器正在更新',
	'Request failed with status code 502': '请求失败，状态代码502',
	'Request failed with status code 501': '请求失败，状态代码501',
	'Request failed with status code 500': '请求失败，状态代码500',
	'Request failed with status code 404':'请求失败，状态代码404',
	'Network Error': '网络错误',
	'timeout of 10000ms exceeded': '请求超时',
};

const Message = (content: string, time?: number, type?: string) => {
	content = errText[content] ? errText[content] : content;
	// 销毁超出显示数量的消息 最多10条
	let arr = document.getElementsByClassName('ui-message-bg');
	if (arr.length === 10) {
		try {
			window.document.body.removeChild(arr[0]);
		} catch (error) {}
	}
	//消息类型
	type = type === undefined ? 'default' : type;
	// 生成消息
	let obj = document.createElement('div');
	let achilddv = document.createElement('div');
	// 判定类型
	switch (type) {
		case 'default':
			achilddv.innerHTML = content;
			achilddv.className = 'ui-message-content';
			break;
		case 'error':
			achilddv.className = 'ui-message-content ui-message-white';
			achilddv.innerHTML =
				'' +
				content;
			break;
		case 'info':
			achilddv.className = 'ui-message-content ui-message-white';
			achilddv.innerHTML =
				'' +
				content;
			break;
	}
	obj.className = 'ui-message-bg';

	window.document.body.appendChild(obj);
	obj.appendChild(achilddv);
	if (time === undefined || time === null) time = 1500;
	let maxTime = time + 500;
	// 使用500毫秒产生动画
	setTimeout(() => {
		obj.style.cssText = 'animation-name: message-hidden;';
	}, time);
	// 销毁组件
	setTimeout(() => {
		try {
			window.document.body.removeChild(obj);
		} catch (error) {}
	}, maxTime);
};

export default Message;

css

.ui-message-bg{
     display: flex; 
     justify-content: center;
     position: fixed;
     z-index:2021;
     width:100%;
     animation-name: message-show;
     animation-duration: 0.3s;
     animation-fill-mode:forwards
}
.ui-message-content{
    background: #3D3F47;
    color: #f9f9f9;
    padding: 14px 30px; 
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
}
@keyframes message-show {
  0%   {top: 17px;opacity: 0}
  25%  {top: 34px;opacity: 0.25}
  50%  {top: 51px;opacity: 0.50}
  100% {top: 68px;opacity: 1}
}
@keyframes message-hidden {
  0%   {top: 68px;opacity: 1}
  25%  {top: 51px;opacity: 0.50}
  50%  {top: 34px;opacity: 0.25}
  100% {top: 17px;opacity: 0}
}

自定义后不但满足项目要求,使用方式也变得更为简单,整个项目代码都减少了很多

antd
import {  message } from "antd";
message.open({
		className: "white_theme",//项目要求，必填
		icon: "",//项目要求，必填
		content: "您当前已在会议中，暂无法加入其它会议",
		duration: 2,// 默认3秒，应项目要求必填2
});
自定义	
import message from "../comm/message";
message("测试消息")