Red de conocimiento informático - Aprendizaje de programación - element-plus, ¿cómo configurar iconos dinámicamente?

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

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

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

Hay dos formas de usarlo. Una es registrar todos los íconos de manera simple y sencilla y verificar los archivos en node_modules. Un archivo **** de doscientos a trescientos KB. No te importa el tamaño, puedes ingresarlos todos.

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

Utiliza componentes dinámicos en tu plantilla para cargar iconos según su nombre y utiliza estilos para establecer el tamaño y el color.

Aquí hay algunos ejemplos:

El atributo prefijo-icon de el-input puede configurar el icono. El tipo de atributo es cadena o componente. Pruebe con cadena, pero no tiene ningún efecto. Es posible que deba usarlo nuevamente. El ícono correspondiente se registra internamente en el componente el-input, por lo que es inconveniente implementar íconos dinámicos y registrar íconos globalmente.

Ahora que hemos creado un diccionario registrado globalmente, se pueden utilizar las propiedades.

Esto permitirá utilizar iconos dinámicos de forma coherente.