原生JS封装仿element-ui 消息提示框

提示框的三种样式，如下图：

error样式

success样式

warn样式

js代码部分

function showToast(msg,type){//消息弹出框
    var messageEle = document.getElementsByClassName("parent-tips");
    //获取最后一个消息提示的显示层级，新的消息提示层级在此基础上+1
    var zIndex = messageEle.length == 0 ? 30 + 1 : parseInt(messageEle[messageEle.length-1].style.zIndex) + 1;
    var parent = document.createElement('div');
    parent .style.display = "block";
    parent .style.zIndex = zIndex;
    parent .className = "parent-tips";
    var tip = document.createElement('div') ;
    tip.className = "global-msg-tips " + type;
    var img_ele = document.createElement('img');
    img_ele.src = "../images/"+type+".png";
    var span_ele = document.createElement('span');
    span_ele.textContent = msg;
    tip.appendChild(img_ele);
    tip.appendChild(span_ele);
    parent .appendChild(tip);
    document.body.appendChild(parent);
    setTimeout(function() {
        document.body.removeChild(parent);
    }, 3000)
 }

html部分

html

css代码部分

.parent-tips{
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
}
.global-msg-tips {
    z-index: 30;
    margin:0 auto;
    width: 380px;
    height: 50px;
    color: #fff;
    font-size: 16px;
    animation: tips_animate 3s ease-in-out;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
.global-msg-tips img{
      width:16px;
      height:16px;
      margin-right:10px;
  }
@keyframes tips_animate {
    0% {
      transform: translateY(0px);
    }
    10% {
        transform: translateY(120px);
    }
    20% {
        transform: translateY(120px);
    }
    30% {
        transform: translateY(120px);
    }
    40% {
        transform: translateY(120px);
    }
    50% {
        transform: translateY(120px);
    }
    60% {
        transform: translateY(120px);
    }
    70% {
        transform: translateY(120px);
    }
    80% {
        transform: translateY(120px);
    }
    90% {
        transform: translateY(120px);
    }
    100% {
      transform: translateY(0px);
    }
  }
.warn {
    background-color: #FDF6EC;
    border:1px solid #FAECD8;
    color: #E7A75E;
  }

  .success {
    background-color: #F0F9EB;
    border:1px solid #E1F3D8;
    color:#67C23A;
  }
  .error{
    background-color: #FEF0F0;
    border:1px solid #FDE2E2;
    color:#F56C6C;
  }