骨架装载器

骨架加载器提供了一种简单的方式，在你的应用程序中显示加载占位符。

TIP

此特性在 v3.4.0 (Blackguard) 版本引入。

使用

v-skeleton-loader 组件为用户提供了一个视觉指示器，表明内容正在加载或即将到来。这比传统的全屏加载器更受欢迎。

API

组件	描述
v-skeleton-loader	主要组件

组件结构

v-skeleton-loader 有一个默认槽，在组件未处于加载状态时呈现。

元素 / 区域	描述
1. 容器	容器是元件的根元素。

指南

v-skeleton-loader 组件可以在各种情境下使用，包括卡片、列表和表格。它可以用来创建一个占位符加载状态，用于从服务器获取内容或异步加载内容。

以下代码片段是一个基本的 v-skeleton-loader 组件示例。当没有提供 type 属性时，组件将默认为图像类型。

<v-skeleton-loader></v-skeleton-loader>

属性

v-skeleton-loader 组件有一个小型 API，主要用于配置根和项目高度。

类型

type 属性用于定义骨架加载器的类型。类型可以组合在一起创建更复杂的骨架。例如，card 类型是图像和标题类型的组合。

可使用以下内置类型：

Type	Composition
actions	button@2
article	heading, paragraph
avatar	avatar
button	button
card	image, heading
card-avatar	image, list-item-avatar
chip	chip
date-picker	list-item, heading, divider, date-picker-options, date-picker-days, actions
date-picker-options	text, avatar@2
date-picker-days	avatar@28
divider	divider
heading	heading
image	image
list-item	text
list-item-avatar	avatar, text
list-item-two-line	sentences
list-item-avatar-two-line	avatar, sentences
list-item-three-line	paragraph
list-item-avatar-three-line	avatar, paragraph
ossein	ossein
paragraph	text@3
sentences	text@2
subtitle	text
table	table-heading, table-thead, table-tbody, table-tfoot
table-heading	heading, text
table-thead	heading@6
table-tbody	table-row-divider@6
table-row-divider	table-row, divider
table-row	text@6
table-tfoot	text@2, avatar@2
text	text

加载

如果满足以下条件之一，则认为骨架装载器处于装载状态：

• 默认插槽未被使用
• loading 属性被设置为 true

如果满足任一条件，骨架加载器将返回类型结构，替换默认插槽，并应用尺寸值，例如高度、宽度、最小高度等。如果条件不满足，则返回默认插槽。

海拔

elevation 属性使骨架加载器的海拔与其替换的内容相匹配。

模板

v-skeleton-loader 可以在创建样机时作为样板设计使用。混合和匹配各种预定义选项，或创建自己独特的实现。在这个例子中，我们使用一个自定义的数据属性，一次性将相同的属性应用到多个 v-skeleton-loader 中。

示例

下面的示例集展示了 v-skeleton-loader 组件在现实世界中更高级的用法。

冰淇淋建议

下面的示例演示了如何使用 v-skeleton-loader 组件创建占位符加载状态，以便从服务器获取内容或异步加载内容。

SASS 变量

通过修改 v-skeleton-loader SASS variables 的 SASS 变量来进行微调。当你想要改变默认按钮高度或填充时，这是很有用的。

@use 'vuetify/settings' with (
  $skeleton-loader-gutter: 24px,
  $skeleton-loader-button-width: 80px,
);

有关所有可用 SASS 变量的列表，请访问 v-skeleton-loader API 页面。

无障碍

默认情况下，v-skeleton-loader 组件被分配了一个 WAI-ARIA 角色为 alert。我们通过三个 aria 属性增强了这个角色。一个 aria-busy 属性值为 true 表示小部件缺少必需的所属元素。一个 aria-live 属性值为 polite 设置了屏幕阅读器对实时区域的优先级。最后，aria-label 用于提供元素的人类可读描述。

配置 aria-label

在区域设置选项中配置 v-skeleton-loader 组件中使用的默认文本。以下示例演示了如何更新 loading-text 属性：

import { createVuetify } from 'vuetify'

export default createVuetify({
  locale: {
    messages: {
      loading: 'Loading content...',
    },
  },
})

导航至 本地化 (i18n) 页面，了解有关如何配置本地化选项的更多信息。