Skeleton 骨架屏

文章目录

• • 前言
  • 步骤
  • • [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 原因：报错原因是 \