Reemplace el botón de cierre predeterminado en la ventana emergente el-dialog en element-ui

introducir

Al usar los componenteselement-ui en el marco , debe modificar el ícono de cierre predeterminado en la ventana emergente; como se muestra en la figura a continuación: el izquierdo es el que desea reemplazar; el derecho es el ícono de cierre predeterminado del componente ;el-dialog
inserte la descripción de la imagen aquí

analizar

Al verificar los elementos del componente, se encuentra que el cierre predeterminado del componente es un icono, se muestra en forma de icono.
Luego puede CSSocultar el icono actual; luego establecer su imagen de fondo en el cuadro principal del icono actual para introducir nuestra imagen correspondiente.

el código

El código central es el siguiente:

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

Nota: El componente predeterminado en la ventana emergente es cerrado, es un icono, lo que agregamos backgroundconfigurando es una imagen, no es un icono;

Supongo que te gusta

Origin blog.csdn.net/Shivy_/article/details/127861530
Recomendado
Clasificación