el-skeleton详解

el-skeleton 是 Element Plus 框架中的骨架屏组件，用于在数据加载过程中展示占位符，提升用户体验。它常用于页面加载、数据请求等场景。

el-skeleton 属性详解

1. rows:

   • 类型: Number
   • 用途: 行数。
   • 默认值: 3

2. loading:

   • 类型: Boolean
   • 用途: 是否显示骨架屏。
   • 默认值: true

3. animated:

   • 类型: Boolean
   • 用途: 是否显示动画效果。
   • 默认值: false

4. throttle:

   • 类型: Number
   • 用途: 更新骨架屏的频率（毫秒）。
   • 默认值: 200

5. paragraph:

   • 类型: Boolean | Object
   • 用途: 是否显示段落及段落配置。
   • 默认值: { rows: 3 }

6. avatar:

   • 类型: Boolean | Object
   • 用途: 是否显示头像及头像配置。
   • 默认值: false

el-skeleton 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义骨架屏的内容。

完整示例代码

<template>
  <div>
    <h2>Skeleton 示例</h2>

    <!-- 基本用法 -->
    <el-skeleton :loading="loading" animated>
      <template #default>
        <div v-if="!loading">
          <h3>加载完成的内容</h3>
          <p>这里是详细的内容。</p>
        </div>
      </template>
    </el-skeleton>

    <!-- 自定义行数和段落 -->
    <el-skeleton :loading="loading" :rows="5" :paragraph="{ rows: 5 }" animated>
      <template #default>
        <div v-if="!loading">
          <h3>加载完成的内容</h3>
          <p>这里是详细的内容。</p>
          <p>这里是详细的内容。</p>
          <p>这里是详细的内容。</p>
          <p>这里是详细的内容。</p>
        </div>
      </template>
    </el-skeleton>

    <!-- 显示头像 -->
    <el-skeleton :loading="loading" :avatar="{ size: 'large', shape: 'square' }" :rows="3" animated>
      <template #default>
        <div v-if="!loading">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39563bf081c01a5441cc84f9jpeg.jpeg"></el-avatar>
          <h3>加载完成的内容</h3>
          <p>这里是详细的内容。</p>
        </div>
      </template>
    </el-skeleton>

    <!-- 自定义内容 -->
    <el-skeleton :loading="loading" animated>
      <template #default>
        <div v-if="!loading">
          <el-card>
            <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5143b3jpeg.jpeg" alt="图片">
            <h3>加载完成的内容</h3>
            <p>这里是详细的内容。</p>
          </el-card>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const loading = ref(true)

// 模拟数据加载
setTimeout(() => {
  loading.value = false
}, 2000)
</script>

代码解释

1. 基本用法:

   • 使用 el-skeleton 组件并设置 loading 和 animated 属性。

   • <el-skeleton :loading="loading" animated>
       <template #default>
         <div v-if="!loading">
           <h3>加载完成的内容</h3>
           <p>这里是详细的内容。</p>
         </div>
       </template>
     </el-skeleton>
     

2. 自定义行数和段落:

   • 使用 rows 和 paragraph 属性自定义行数和段落配置。

   • <el-skeleton :loading="loading" :rows="5" :paragraph="{ rows: 5 }" animated>
       <template #default>
         <div v-if="!loading">
           <h3>加载完成的内容</h3>
           <p>这里是详细的内容。</p>
           <p>这里是详细的内容。</p>
           <p>这里是详细的内容。</p>
           <p>这里是详细的内容。</p>
         </div>
       </template>
     </el-skeleton>
     

3. 显示头像:

   • 使用 avatar 属性显示头像，并设置头像的大小和形状。

   • <el-skeleton :loading="loading" :avatar="{ size: 'large', shape: 'square' }" :rows="3" animated>
       <template #default>
         <div v-if="!loading">
           <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39563bf081c01a5441cc84f9jpeg.jpeg"></el-avatar>
           <h3>加载完成的内容</h3>
           <p>这里是详细的内容。</p>
         </div>
       </template>
     </el-skeleton>
     

4. 自定义内容:

   • 使用默认插槽自定义骨架屏的内容。

   • <el-skeleton :loading="loading" animated>
       <template #default>
         <div v-if="!loading">
           <el-card>
             <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5143b3jpeg.jpeg" alt="图片">
             <h3>加载完成的内容</h3>
             <p>这里是详细的内容。</p>
           </el-card>
         </div>
       </template>
     </el-skeleton>
     

模拟数据加载

• loading:

  • 控制骨架屏的显示和隐藏。

  • const loading = ref(true)
    
    // 模拟数据加载
    setTimeout(() => {
      loading.value = false
    }, 2000)