element-ui中更换el-dialog弹窗中默认的关闭按钮

介绍

在使用element-ui 框架里的 el-dialog 组件时，要修改弹窗里默认的关闭图标；如下图所示：左边是想要替换后的；右边是组件默认的关闭图标；

解析

通过检查组件的元素；发现组件默认的关闭是一个图标；通过图标的形式展现的。
那就可以通过 CSS 隐藏当前的图标；然后在当前图标的父级盒子上；设置他的背景图片，来引入我们对应的图片。

代码

核心代码如下：

.el-dialog__headerbtn {
   	background: url("~/assets/images/close-dialog.png");
    background-size: cover;
    height: 20px;
    width: 20px;
    i {  
      display: none;  // 在这里隐藏弹窗默认的关闭图标
    }
  }

注意： 弹窗组件里默认的关闭；是一个图标；我们通过设置background的方式添加的是一张图片；不是图标；