![](https://i-blog.csdnimg.cn/blog_migrate/d41abe613b6b69cc03f8319b79ca1386.png)
![](https://i-blog.csdnimg.cn/blog_migrate/baaae3b0a333bdc65c711324846350cb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/024c7db6f2a57549b6949d96f9c914a7.png)
这个组件,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 =
'<i class="iconfont iconfail" style="color:#FF656B;"></i>' +
content;
break;
case 'info':
achilddv.className = 'ui-message-content ui-message-white';
achilddv.innerHTML =
'<i class="iconfont iconsuccess" style="color:#007AFF;"></i>' +
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("测试消息")