骨架屏 ​

在需要加载数据，并需要为最终用户提供丰富的视觉和交互体验时，你可以选择使用 skeleton 组件。

基础用法 ​

基础的骨架屏。

可配置的行 ​

您可以自己配置行数，为了更精确的渲染效果，实际渲染的行数总是比给定的数字多 1，因为我们渲染了一个标题行，其宽度是其他行的 33% 。

动画效果 ​

我们提供了一个开关标志，指示是否显示加载动画，称为 animated，当此值为 true 时，el-skeleton 的所有子项都将显示动画。

自定义模板 ​

Element Plus 只提供了最常用的模板，有时这可能是一个问题，所以你有一个名为 template 的插槽来完成这项工作。

此外，我们还提供了不同类型的骨架单元供您选择，更多详细信息，请向下滚动到本页底部查看 API 描述。此外，在构建您自己的自定义骨架结构时，您应该使其尽可能接近真实的 DOM 结构，从而避免因高度差异而导致的 DOM 抖动。

加载状态 ​

当 Loading 结束时，我们总是需要向最终用户显示带有数据的真实 UI。通过 loading 属性，我们可以控制是否显示 DOM。您也可以使用 default 插槽来构建真实的 DOM 元素。

渲染列表数据 ​

大多数情况下，骨架屏被用作渲染尚未从服务器获取的数据列表的指示器，然后我们需要凭空创建一个骨架屏列表，使其看起来像是在加载中，通过 count 属性，您可以控制需要向浏览器渲染多少个这样的模板。

避免渲染抖动。 ​

有时 API 响应非常快，当这种情况发生时，骨架屏刚刚被渲染到 DOM，然后就需要切换回真实的 DOM，这会导致突然的闪烁。为避免这种情况，您可以使用 throttle 属性。

初始渲染加载 2.8.8 ​

当 loading 的初始值为 true 时，可以设置 throttle: {initVal: true, leading: xxx} 来控制初始骨架屏的即时显示，而无需节流。

无渲染抖动地切换显示/隐藏 2.8.8 ​

有时你希望在加载切换显示或隐藏时更平滑地渲染业务组件。你可以使用 throttle: {leading: xxx, trailing:xxx} 来控制渲染抖动。

​

Skeleton API ​

Skeleton 属性 ​

Skeleton 插槽 ​

SkeletonItem API ​

SkeletonItem 属性 ​

来源 ​

组件 • 样式 • 文档

贡献者 ​