vue+element 修改Message 消息提示状态弹窗

效果图

修改前

修改后

实现方式

1.创建js文件

import { Message } from 'element-ui'
//封装弹框
const msgs  =  (type,msg1,msg2) => {
   
    if(msg1){
        msg1=`<p class="el-message-title-top">${msg1}</p>`
    }else{
       msg1=''  
    }
    if(msg2){
        msg2=`<p class="el-message-title-bottom">${msg2}</p>`
    }else{
          msg2=''
    }
    Message({
        message: msg1+msg2,
        dangerouslyUseHTMLString: true,
        duration:1000,
        type: type
    })
}
export default msgs

2.设置css样式

.el-message {
    min-width: 100px !important;
    max-height: 155px;
    background: #fff !important;
    border-color: #fff !important;
    display: inline-block !important;
    padding: 24px;
    text-align: center;
    top: 40% !important;
    box-shadow: 0px 1px 4px 0px rgba(119, 121, 121, 0.4);

    .el-message__icon {
        width: 48px;
        height: 48px;
        font-size: 48px !important;
        margin-right: 0 !important;
        float: left;
        margin-left: calc(50% - 24px);
    }

    .el-icon-warning {
        color: #FF6363;
    }

    .el-icon-success {
        color: #49C3BF !important;
    }

    .el-message-title-top {
        font-size: 18px;
        font-family: NotoSansHans;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 27px;
        margin-top: 48px;
    }

    .el-message-title-bottom {
        font-size: 14px;
        font-family: NotoSansHans;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 21px;
    }
}

3.在main.js

import msg from './api/message.js';
Vue.prototype.$msg = msg;

4.使用

//this.$msg(按钮icon 跟element的一样	success/warning/info/error,提示信息1,提示信息2);
 this.$msg("warning",'“用户中心”不可删除', res.msg);
 this.$msg("warning", res.msg);
 this.$msg("success", res.msg);