引言
消息提示框在实际应用场景当中比较常见，最常用的就是element ui的消息提示框，我们通常都是直接使用它们,但是我们有没有尝试过去探究其实现原理，并自己动手实现呢？为了提升我们的个人能力和竞争力，我们可以尝试来实现这样一个消息提示框。
实现效果
我们来查看一下最终实现效果，如下图所示:
准备工作
搭建基本的项目结构
我们创建一个message文件夹，然后创建一个index.html文件，以及message.js和message.css文件，如下所示:
对消息提示框进行布局
在html文件中，我们可以先来实现一个静态的消息提示框，代码如下:
这是一个提示框
×
然后再message.css我们写上基本的css代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 消息提示框容器样式 */
.message {
position: fixed;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
min-width: 300px;
background-color: #edf2fc;
border: 1px solid #edf2fc;
padding: 16px 17px;
top: 25px;
border-radius: 6px;
overflow: hidden;
z-index: 1000;
}
/* 关闭按钮样式 */
.message > .message-close-btn {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #c0c0c4;
font-size: 17px;
cursor: pointer;
}
.message > .message-close-btn:hover,.message > .message-close-btn:active {
color: #909399;
}
/* 消息提示框内容样式 */
.message p {
line-height: 1;
font-size:14px;
color: #909399;
}
有四种提示框，以及让内容居中，我们不外乎是多加一个类名来写css样式，比如内容居中，我们只需要在html消息提示框容器元素加上一个类名，代码如下:
这是一个提示框
×
然后再css文件中加一段如下的css代码即可:
/* 内容居中 */
.message.message-center {
justify-content: center;
}
四种类型的提示框不外乎也是同样的原理，增加一个类名，然后改变的是背景色和字体色，所以html代码如下:
这是一个成功提示框
×
这是一个警告提示框
×
这是一个错误提示框
×
css代码如下:
/* 成功提示框样式 */
.message.message-success {
background-color: #e1f3d8;
border-color:#e1f3d8;
}
.message.message-success p {
color: #67c23a;
}
/* 警告提示框样式 */
.message.message-warning{
background-color: #fdfce6;
border-color: #fdfce6;
}
.message.message-warning p{
color: #e6a23c;
}
/* 错误提示框样式 */
.message.message-error {
background-color: #fef0f0;
border-color: #fef0f0;
}
.message.message-error p {
color: #f56c6c;
}
这样一来，准备工作就完成了，接下来就是我们的重头戏，JavaScript代码，尝试将如上代码注释掉。
动态实现创建提示框
定义四种类型的消息提示框
我们通过定义一个对象来表示消息提示框的类型，如下所示:
// 消息提示框的四种类型
let typeMap = {
info: "info",
warning: "warning",
success: "success",
error: "error"
}
添加默认配置项
我们分析一下需要传入的配置项有内容(content),关闭提示框时间(closeTime),是否显示关闭提示框按钮(showClose),内容居中(center)以及消息提示框类型(type)。所以定义配置项如下:
// 提示框的默认配置项
let messageOption = {
type: "info",
closeTime: 600,
center: false,
showClose: false,
content: "默认内容"
}
创建一个消息提示框类
我们通过面向对象的编程思维将消息提示框当做是一个类对象，所以我们只需要创建一个类。虽然可以使用es6的class语法来创建，但是为了方便，我们使用构造函数来实现。创建一个构造函数Message，如下所示:
function Message(option) {
//这里做了一次初始化
this.init(option);
}
初始化
创建了消息提示框构造函数之后，我们需要传入配置项，并且我们在函数里做了初始化操作，接下来我们来实现初始化的操作。
Message.prototype.init = function (option) {
//这里创建了提示框元素，并将整个提示框容器元素添加到页面中
document.body.appendChild(this.create(option));
//这里设置提示框的top
this.setTop(document.querySelectorAll('.message'));
//判断如果传入的closeTime大于0，则默认关闭提示框
if (option.closeTime > 0) {
this.close(option.container, option.closeTime);
}
//点击关闭按钮关闭提示框
if (option.close) {
option.close.onclick = (e) => {
this.close(e.currentTarget.parentElement, 0);
}
}
}
创建提示框
在前面的初始化操作中，我们做了几个功能，首先创建提示框容器元素，并将提示框容器元素添加到页面bod中。我们还做了动态计算提示框的top以及判断传入的默认关闭时间来关闭提示框，点击关闭按钮关闭提示框。我们来看创建提示框的方法，即create方法的编写操作。如下:
Message.prototype.create = function (option) {
//这里做了一个判断，表示如果设置showClose为false即不显示关闭按钮并且closeTime也为0，即无自动关闭提示框，我们就显示关闭按钮
if(!option.showClose && option.closeTime <=0)option.showClose = true;
//创建容器元素
let element = document.createElement('div');
//设置类名
element.className = `message message-${option.type}`;
if (option.center) element.classList.add('message-center');
//创建关闭按钮元素以及设置类名和内容
let closeBtn = document.createElement('i');
closeBtn.className = 'message-close-btn';
closeBtn.innerHTML = '×';
//创建内容元素
let contentElement = document.createElement('p');
contentElement.innerHTML = option.content;
//判断如果显示关闭按钮，则将关闭按钮元素添加到提示框容器元素中
if (closeBtn && option.showClose) element.appendChild(closeBtn);
//将内容元素添加到提示框容器中
element.appendChild(contentElement);
//在配置项对象中存储提示框容器元素以及关闭按钮元素
option.container = element;
option.close = closeBtn;
//返回提示框容器元素
return element;
}
实现提示框的关闭
我们可以看到，我们创建了一个close方法，并传入提示框容器元素，来实现关闭一个提示框，接下来我们来实现这个关闭方法。如下所示:
Message.prototype.close = function (messageElement, time) {
//根据传入的时间来延迟关闭，实际上也就是移除元素
setTimeout(() => {
//判断如果传入了提示框容器元素，并且分两种情况，如果是多个提示框容器元素则循环遍历删除，如果是单个提示框容器元素，则直接删除
if (messageElement && messageElement.length) {
for (let i = 0; i < messageElement.length; i++) {
if (messageElement[i].parentElement) {
messageElement[i].parentElement.removeChild(messageElement[i]);
}
}
} else if (messageElement) {
if (messageElement.parentElement) {
messageElement.parentElement.removeChild(messageElement);
}
}
//关闭了提示框容器元素之后，我们重新设置提示框的top值
this.setTop(document.querySelectorAll('.message'));
}, time * 10);
}
实现提示框的动态top
最后我们需要实现的是动态计算消息提示框的top，然后不让消息提示框重叠在一起。代码如下:
Message.prototype.setTop = function (messageElement) {
//这里做一个判断的原因就是当点击页面中最后一个提示框的时候，会重新调用一次，这时获取不到提示框容器元素，所以就不执行后续的设置top
if (!messageElement || !messageElement.length) return;
//由于每个提示框的高度一样，所以我们只需获取第一个提示框元素的高度即可
const height = messageElement[0].offsetHeight;
for (let i = 0; i < messageElement.length; i++) {
//每个提示框的top由一个固定值加上它的高度，并且我们要乘以它的一个索引值
messageElement[i].style.top = (25 * (i + 1) + height * i) + 'px';
}
}
最后，实现封装，让我们可以如同调用element ui那样来调用
我们想要这样调用$message()或者$message.info()，那么我们可以实现如下:
let $message = {};
window['$message'] = $message = function (option) {
let newMessageOption = null;
if (typeof option === 'string') {
newMessageOption = Object.assign(messageOption, { content: option });
} else if (typeof option === 'object' && !!option) {
newMessageOption = Object.assign(messageOption, option);
}
return new Message(newMessageOption);
}
for (let key in typeMap) {
window['$message'][key] = function (option) {
let newMessageOption = null;
if (typeof option === 'string') {
newMessageOption = Object.assign(messageOption, { content: option,type:typeMap[key] });
} else if (typeof option === 'object' && !!option) {
newMessageOption = Object.assign(JSON.parse(JSON.stringify(messageOption)),option,{ type:typeMap[key] });
}
return new Message(newMessageOption);
}
}
整个逻辑也十分简单，无非就是判断传入的配置项，然后进行合并，并传入实例化的Message中。
如此一来，我们就完成了一个消息提示框。
录制视频
如果以上分析还不懂的话，可以查看我录制的一个视频:
