引言

消息提示框在实际应用场景当中比较常见，最常用的就是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样式，比如内容居中