文章目录
前言
在需要等待加载内容的位置设置一个骨架屏，某些场景下比 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
效果
由于自己的网站涉及到客户私密，所以就用demo图片展示一下
