Replace the default close button in the el-dialog pop-up window in element-ui

introduce

When using the componentselement-ui in the framework , you need to modify the default close icon in the pop-up window; as shown in the figure below: the left is the one you want to replace; the right is the default close icon of the component;el-dialog

analyze

By checking the elements of the component; it is found that the default closure of the component is an icon; it is displayed in the form of an icon.
Then you can CSShide the current icon; then set its background image on the parent box of the current icon to introduce our corresponding image.

the code

The core code is as follows:

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

Note: The default in the pop-up window component is closed; it is an icon; what we backgroundadd by setting is a picture; it is not an icon;