Skeleton 骨架屏

清风细雨_林木木2025-01-21 20:38

文章目录

- 前言
- 步骤
- - [1. 了解基本结构](#1. 了解基本结构)
  - [2. 包裹结构](#2. 包裹结构)
  - [3. 使用loading变量控制好显示和隐藏就好。](#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

效果

由于自己的网站涉及到客户私密，所以就用demo图片展示一下