Skeleton
Cuando se cargan los datos, y se necesita una experiencia rica en visualización e interacción para los usuarios finales, se puede elegir skeleton.
Uso básico
El esqueleto básico.
Filas configurables
Puede configurar los números de fila usted mismo, para un efecto de renderizado más preciso, el número de fila real renderizado siempre será 1 fila más que el número dado, esto es porque estamos renderizando una fila de títulos con un 33% de ancho de las otras.
Animaciones
Hemos proporcionado una bandera de conmutación indicando si se muestra la animación de carga, llamada animated cuando esto es true, todos los hijos de el-skeleton mostrarán una animación
Plantilla personalizada
Element Plus solo proporciona la plantilla más común, a veces eso podría ser un problema. así que tiene un slot con nombre template para hacer ese trabajo.
También hemos proporcionado diferentes tipos de unidad esqueleto que puedes elegir, para obtener información más detallada, por favor desplácese hacia la parte inferior de esta página para ver la descripción de la API. Además, al construir tu propia estructura esquelética personalizada, debería estructurarlas lo más cerca posible del DOM real, que evita que el DOM tenga un efecto de rebote causado por la diferencia de altura.
Estado de carga
Cuando Loading termina, siempre necesitamos mostrar la interfaz real con datos a nuestros usuarios finales. con el atributo loading podemos controlar si se muestra el DOM. También puede usar el slot default para estructurar el elemento DOM real.
Renderizando una lista de datos
La mayoría de las veces, el esqueleto se utiliza como indicadores de la representación de una lista de datos que no se han recuperado del servidor todavía, entonces tenemos que crear una lista de esqueleto de la nada para que parezca que se está cargando, con el atributo count, se puede controlar el número de estas plantillas que necesita para representar al navegador.
TIP
No recomendamos procesar mucha interfaz falsa en el navegador, causará problemas de rendimiento y también costará más tiempo destruir el esqueleto. Mantenga count tan pequeño como pueda ser para mejorar la experiencia del usuario.
Evitar el efecto rebotar del renderizado.
A veces la API responde muy rápidamente, cuando eso sucede, el esqueleto solo se renderiza en el DOM y luego tiene que volver a cambiar al DOM real, lo que provoca un destello repentino. Para evitar esto, puede usar el atributo throttle.
API de Esqueleto
Atributos
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| animated | si se muestra la animación | boolean | false |
| count | cuántos elementos falsos procesar en el DOM | number | 1 |
| loading | si se muestra el DOM real | boolean | false |
| rows | números de la fila, solo útiles cuando no se ha dado ninguna plantilla de slot | number | 3 |
| throttle | retraso de renderizado en milisegundos | number | 0 |
Slots
| Nombre | Descripción | Ámbito |
|---|---|---|
| default | DOM renderizado real | object |
| template | contenido como renderizado plantilla de esqueleto | object |
API de SkeletonItem
Atributos del SkeletonItem
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| variant | el tipo de esqueleto de procesamiento actual | enum | text |
三咲智子
jeremywu
云游君
C.Y.Kun
LIUCHAO
btea
wzc520pyfm
blackie
bqy
on the field of hope
porcelainHeart
HzLin
qiang