Skeleton 骨架屏

2025/4/19 8:36:20 来源：https://blog.csdn.net/weixin_35773751/article/details/145266709 浏览: 次关键词：Skeleton 骨架屏

文章目录

- 前言
- 步骤
- - 1. 了解基本结构
  - 2. 包裹结构
  - 3. 使用loading变量控制好显示和隐藏就好。
- 效果

前言

在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。

步骤

1. 了解基本结构

使用Skeleton前要了解基本使用元素。

外层标签“el-skeleton”
<template #template>
<el-skeleton-item>
实际的展示层

2. 包裹结构

<template><el-skeleton :loading="loading" animated style="width: 240px"><!-- 骨架屏的控制 --><template #template><el-skeleton-item variant="image" style="width: 240px; height: 240px" /><div style="padding: 14px"><el-skeleton-item variant="h3" style="width: 50%" /></div></template><!-- 真正渲染的DOM --><div class="model-items">……</div></el-skeleton>
</template>

3. 使用loading变量控制好显示和隐藏就好。

补充：大部分人会遇到这种报错

‘v-slot’ directive must be owned by a custom element, but ‘template’ is not. eslint(vue/valid-v-slot)
[vue/valid-v-slot] ‘v-slot’ directive must be owned by a custom element, but ‘template’ is not. eslint-plugin-vue

原因：报错原因是 <template #default> 使用了 v-slot 指令，但 template 标签本身不是自定义元素。根据 Vue 的规范，v-slot 必须绑定在自定义组件上，而不能直接用在普通的 template 标签上。

解决办法：直接移除真正渲染的DOM上的#default