Element-plus, ¿cómo configurar iconos dinámicamente?

En realidad es muy simple. Registramos el componente de icono requerido como un diccionario global, en forma de clave: componente, y luego podemos convertir la cadena en el componente de icono.

Primero cree un archivo js, ​​introduzca el ícono, conviértalo en un diccionario y luego use la función de complemento de Vue para registrarlo como una variable global.

Existen dos formas de utilizarlo. Una es que todos los íconos simples y toscos están registrados. Mire los archivos en node_modules, de uno * * * doscientos a trescientos KB. Si no te importa demasiado el tamaño, puedes meterlos todos.

Si no utilizas muchos iconos, sólo puedes introducir los que necesites, de modo que el tamaño será mucho menor.

Utiliza componentes dinámicos en tu plantilla, carga iconos por nombre, establece tamaño y color con estilos, y listo.

Algunos ejemplos:

El atributo de icono de prefijo de El-input se puede configurar con un icono y el tipo de atributo es cadena o componente. Probé la cuerda, pero no funcionó. Es posible que necesite utilizar el-input para registrar el icono correspondiente en el componente, por lo que no es conveniente implementar iconos dinámicos o registrar iconos globalmente.

Dado que creamos un diccionario registrado globalmente, también se pueden utilizar atributos.

De esta manera, los iconos dinámicos se pueden utilizar de manera uniforme.