先来看看ElementUI消息提示组件
官网:
https://element.eleme.cn/#/zh-CN/component/message
我的效果:
代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
div,
i,
button {
margin: 0;
padding: 0;
}
/*预定义样式,通过js动态生成dom时,加上指定类名*/
.dpn-message {
font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
font-size: 12px;
z-index: 99999;
}
.dpn-message {
box-sizing: border-box;
position: fixed;
top: -200px;
left: 50%;
transform: translateX(-50%);
z-index: 99999;
padding: 15px;
padding-right: 32px;
min-width: 20%;
max-width: 50%;
border-radius: 4px;
transition: top .3s;
}
/*info 消息*/
.dpn-message.dpn-info {
background: #EDF2FC;
border: 1px solid #EBEEF5;
color: #909399;
}
/*success消息*/
.dpn-message.dpn-success {
background: #f0f9eb;
border</