element-UI，怎样更改弹框样式和弹框图片呢？

短命女 2022-12-11 05:19 258阅读 0赞

**组件效果展示：**

![20200928160428528.png][]

**修改后效果展示：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

**代码展示：**（将下面css代码引入公共的css文件即可）

/* 修改弹框的icon变成自定义图片*/
    .el-message{
      min-width: auto!important;
      font-size: 14px;
      border: 1px solid #ffffff;
      background: #ffffff;
      box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
      border-radius: 2px;
      padding: 16px 21px;
    }
    .el-message__content{
      color: #323232!important;
    }
    .el-message__icon{
      width: 30px;
      height: 30px;
      display: inline-block;
    }
    /* 成功 */
    .el-icon-success {
      background: url('../icon/success.png') center center no-repeat;
    }
    /* 失败 */
    .el-icon-error {
      background: url('../icon/error.png') center center no-repeat;
    }
    /* 提示 */
    .el-icon-info,.el-icon-warning{
      background: url('../icon/info.png') center center no-repeat;
    }
    .el-icon-info,.el-icon-warning,.el-icon-error,.el-icon-success{
      background-size: 100%;
    }
    .el-icon-info:before,.el-icon-warning:before,.el-icon-error:before,.el-icon-success:before {
      content: "";
      font-size: 16px;
      visibility: hidden;
    }

用来测试弹框的代码：

Message({
            message: "上传聊天图片成功",
            type: "success",
            duration:0
          });

[20200928160428528.png]: /images/20221123/58c448dd43404ac197711f0b4b741fa4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: /images/20221123/6152b64cff45469394576d3c25818f89.png