Element-UI
数据展示组件

骨架屏组件 (Skeleton)

# 骨架屏组件 (Skeleton)

Element-UI 的 Skeleton 骨架屏组件用于在内容加载时展示一个占位符，提供更好的用户体验。它可以在需要等待加载内容的位置设置一个骨架屏，相较于传统的 Loading 动画，骨架屏在某些场景下的视觉效果更好。

提示

Skeleton 骨架屏组件官方文档：https://element.eleme.cn/#/zh-CN/component/skeleton (opens new window)

# 1. 基本用法

基本语法：Skeleton 组件主要由 Skeleton 和 Skeleton Item 两个部分组成。通过 loading 属性控制骨架屏的显示，当内容加载完成时，可以使用插槽展示真实内容。

<template>
  <el-skeleton :loading="loading" :animated="true">
    <template #default>
      <!-- 真实内容 -->
      <div>内容加载完成后显示的真实内容</div>
    </template>
  </el-skeleton>
</template>

<script>
export default {
  data() {
    return {
      loading: true // 控制骨架屏的显示
    };
  },
  mounted() {
    // 模拟数据加载，3秒后取消骨架屏
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

loading 属性：通过 loading 属性控制骨架屏的显示。当 loading 为 true 时，展示骨架屏；为 false 时，展示真实内容。
animated 属性：通过 animated 属性控制骨架屏的动画效果。

# Skeleton 属性

参数	说明	类型	可选值	默认值
`animated`	是否使用动画效果	`boolean`	`true`/`false`	`false`
`count`	渲染多少个模板	`number`	整数	`1`
`loading`	是否显示骨架屏	`boolean`	`true`/`false`	`true`
`rows`	骨架屏段落数量	`number`	正整数	`4`
`throttle`	延迟占位 DOM 渲染的时间（毫秒）	`number`	正整数	`0`

# Skeleton Item 属性

Skeleton Item 是 Skeleton 组件的占位元素部分，用于模拟各种类型的内容加载状态。

参数	说明	类型	可选值	默认值
`variant`	当前显示的占位元素的样式	`string`	`p`/`h1`/`h3`/`text`/`caption`/`button`/`image`/`circle`/`rect`	`text`

variant 属性：控制占位元素的样式，可以模拟文本、标题、按钮、图片等不同类型的内容。

# Skeleton 插槽

名称	说明
`default`	用来展示真实的 UI 内容，当 `loading` 为 `false` 时显示
`template`	用来展示自定义占位符，替换默认的占位符样式

# 2. 常用示例

# 基本的骨架屏

在页面加载时，使用骨架屏来占位显示内容，避免用户看到突然加载出来的内容。如下示例展示了一个带动画效果的骨架屏：

<template>
  <el-skeleton :loading="loading" animated>
    <template #default>
      <div>实际加载完成后的内容</div>
    </template>
  </el-skeleton>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 2000); // 模拟加载数据 2 秒后加载完成
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 自定义占位符

可以使用 template 插槽自定义骨架屏的占位符内容，通过 variant 属性设置 Skeleton Item 的类型，比如 text、image、circle 等，替换成更符合设计要求的占位符样式：

占位符的类型：

文本：使用 text 类型模拟普通段落文本的加载。
标题：使用 h1 或 h3 类型模拟标题的加载。
按钮：使用 button 类型模拟按钮的加载。
图片：使用 image 类型模拟图片的加载。
圆形：使用 circle 类型模拟圆形图片或图标的加载。
矩形：使用 rect 类型模拟矩形区域的加载。

<template>
  <el-skeleton :loading="loading" :animated="true">
    <template #template>
      <!-- 图片占位符 -->
      <el-skeleton-item variant="imceage" style="width: 100%; height: 200px;"></el-skeleton-item>

      <!-- 标题占位符 -->
      <el-skeleton-item variant="h3" style="width: 50%; margin-top: 20px;"></el-skeleton-item>

      <!-- 文本占位符 -->
      <el-skeleton-item variant="text" style="width: 80%; margin-top: 10px;"></el-skeleton-item>
      <el-skeleton-item variant="text" style="width: 60%; margin-top: 10px;"></el-skeleton-item>

      <!-- 按钮占位符 -->
      <el-skeleton-item variant="button" style="width: 30%; margin-top: 20px;"></el-skeleton-item>
    </template>

    <template #default>
      <!-- 真实内容 -->
      <div>
        <img src="https://via.placeholder.com/400x200" alt="图片" />
        <h3>加载完成的标题</h3>
        <p>加载完成的段落文本</p>
        <button>加载完成的按钮</button>
      </div>
    </template>
  </el-skeleton>
</template>

<script>
export default {
  data() {
    return {
      loading: true // 控制骨架屏的显示
    };
  },
  mounted() {
    // 模拟数据加载，3秒后取消骨架屏
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

自定义占位符：通过 template 插槽自定义占位符内容，可以展示图片、标题、文本等不同类型的骨架屏。

# 延迟显示骨架屏

当内容加载的时间非常短时，可以通过 throttle 属性设置延迟渲染骨架屏，以减少不必要的渲染开销：

<el-skeleton :loading="loading" :throttle="500">
  <template #default>
    <div>内容加载完成后的实际显示内容</div>
  </template>
</el-skeleton>

1
2
3
4
5

throttle 属性：设置延迟渲染骨架屏的时间，如果内容在设定时间内加载完成，则不会显示骨架屏。

总结

Skeleton 组件：用于占位显示内容，提升用户体验，避免内容加载时页面突然变化。
Skeleton Item：通过 variant 属性定义占位元素的样式，支持多种元素类型。
自定义样式：使用 template 插槽自定义骨架屏的占位符内容，灵活性更高。
延迟渲染：通过 throttle 属性控制骨架屏的延迟渲染，减少不必要的渲染。

# 3. Skeleton 骨架屏的优势

Skeleton 骨架屏在用户体验方面效果更好，因为它可以为用户提供更直观的加载反馈。相比使用静态占位符图片，Skeleton 提供了以下几个优势：

# 1. 更真实的视觉预期

Skeleton 骨架屏通过模拟最终内容的布局结构，使用户可以在加载过程中预览内容的布局和大致形态。这种预期引导可以减少用户的等待焦虑感，因为用户能看到加载完成后页面大致是什么样子。

# 2. 动画效果

Skeleton 提供的动画效果（如骨架屏的闪烁）进一步提升了用户体验。动画能让用户感受到页面正在积极加载，而不是卡在某个地方。与静态的占位符图片相比，动画效果让页面显得更加流畅和有反馈性。

# 3. 自定义与灵活性

Skeleton 提供了更高的灵活性，你可以根据实际需要定义不同形状、大小和数量的骨架屏组件，以匹配不同的内容结构。你还可以通过 animated 属性控制骨架屏的动画，进一步提升视觉效果。

# 4. 减少视觉跳动

当使用静态占位符图片时，内容加载完成后的替换可能会导致页面的视觉跳动，这在用户体验中是不理想的。而 Skeleton 骨架屏通常与最终内容结构一致，替换时更为平滑，减少了视觉上的不连贯感。

# 5. 场景适应性强

Skeleton 可以轻松适用于不同场景，如卡片、列表、图片加载等，提供了一致的加载体验，而占位符图片可能需要为不同场景设计不同的占位图，且不具备一致的风格。

因此，在实际开发中，Skeleton 骨架屏往往比静态的占位符图片更适合用于复杂的UI加载场景。

编辑此页

上次更新: 2024/12/28, 18:32:08

← 头像组件（Avatar）空状态组件 (Empty)→