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.

Switch Loading

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.

vue

<template>
  <el-space style="width: 100%" fill>
    <div>
      <el-button @click="setLoading">Click me to reload</el-button>
    </div>
    <el-skeleton
      style="display: flex; gap: 8px"
      :loading="loading"
      animated
      :count="3"
    >
      <template #template>
        <div style="flex: 1">
          <el-skeleton-item variant="image" style="height: 240px" />
          <div style="padding: 14px">
            <el-skeleton-item variant="h3" style="width: 50%" />
            <div
              style="
                display: flex;
                align-items: center;
                justify-items: space-between;
                margin-top: 16px;
                height: 16px;
              "
            >
              <el-skeleton-item variant="text" style="margin-right: 16px" />
              <el-skeleton-item variant="text" style="width: 30%" />
            </div>
          </div>
        </div>
      </template>
      <template #default>
        <el-card
          v-for="item in lists"
          :key="item.name"
          :body-style="{ padding: '0px', marginBottom: '1px' }"
        >
          <img
            :src="item.imgUrl"
            class="image multi-content"
            style="max-width: 100%"
          />
          <div style="padding: 14px">
            <span>{{ item.name }}</span>
            <div class="bottom card-header">
              <div class="time">{{ currentDate }}</div>
              <el-button text class="button">Operation button</el-button>
            </div>
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </el-space>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

interface ListItem {
  imgUrl: string
  name: string
}

const loading = ref(true)
const lists = ref<ListItem[]>([])
const currentDate = new Date().toDateString()

const setLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

onMounted(() => {
  loading.value = false
  lists.value = [
    {
      imgUrl:
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      name: 'Deer',
    },
    {
      imgUrl:
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      name: 'Horse',
    },
    {
      imgUrl:
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      name: 'Mountain Lion',
    },
  ]
})
</script>

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.

TIP

Since 2.8.8, the throttle attribute supports two values: number and object. When passing a number, it is equivalent to {leading: xxx}, controlling the throttling of the skeleton screen display. Of course, you can also control the throttling of the skeleton screen disappearance by passing {trailing: xxx}

Switch Loading

Delicious hamburger

Fri Nov 15 2024

Initial rendering loading 2.8.8

When the initial value of loading is true, you can set throttle: {initVal: true, leading: xxx} to control the immediate display of the initial skeleton screen without throttling.

Switch Loading

Toggle show/hide without rending bouncing 2.8.8

TIP

You can set throttle: {initVal: true, leading: xxx, trailing: xxx} to control the initial display of the skeleton effect and to make the transition of the skeleton more smooth when switching loading states.

Sometimes you want to render the business components more smoothly when loading toggle show or hide. You can use set the throttle: {leading: xxx, trailing:xxx} to control the rendering bouncing.

Switch Loading

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	rendering delay in milliseconds. Numbers represent delayed display, and can also be set to delay hide, for example `{ leading: 500, trailing: 500 }`. When needing to control the initial value of loading, you can set `{ initVal: true }`	`number` / `object`	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

Fuente

Componentes • Style • Documentación

Contribuidores

Skeleton ​

Uso básico ​

Filas configurables ​

Animaciones ​

Plantilla personalizada ​

Estado de carga ​

Renderizando una lista de datos ​

Evitar el efecto rebotar del renderizado. ​

Initial rendering loading 2.8.8 ​

Toggle show/hide without rending bouncing 2.8.8 ​

​

API de Esqueleto ​

Atributos ​

Slots ​

API de SkeletonItem ​

Atributos del SkeletonItem ​

Fuente ​

Contribuidores ​

Skeleton

Uso básico

Filas configurables

Animaciones

Plantilla personalizada

Estado de carga

Renderizando una lista de datos

Evitar el efecto rebotar del renderizado.

Initial rendering loading 2.8.8

Toggle show/hide without rending bouncing 2.8.8

API de Esqueleto

Atributos

Slots

API de SkeletonItem

Atributos del SkeletonItem

Fuente

Contribuidores