Skeleton

简易介绍

Skeleton 骨架屏，用于在数据加载时展示占位内容，提升用户体验。mengyue-components 进行了封装并进行了 vitest 测试。
可以使用 <MYSkeleton></MYSkeleton> 或者 <MYSkeleton /> 和<MYSkeleton-item></MYSkeleton-item>或者<MYSkeleton-item />来实现一个骨架屏。

基础用法

默认多行文本骨架屏

代码演示

<template>
    <MYSkeleton />
</template>

展开代码

自定义行数

使用count属性可以设置骨架屏的行数。

代码演示

<template>
    <MYSkeleton :count='5' />
</template>

展开代码

圆形骨架屏

使用variant属性可以设置不同的骨架屏样式。

代码演示

<template>
    <MYSkeleton>
        <template #template>
            <MYSkeleton-item variant='circle' style='width: 100px; height: 100px' />
        </template>
    </MYSkeleton>
</template>

展开代码

矩形骨架屏

使用variant="rect"可以创建矩形骨架屏。

代码演示

<template>
    <MYSkeleton>
        <template #template>
            <MYSkeleton-item variant='rect' style='width: 200px; height: 100px' />
        </template>
    </MYSkeleton>
</template>

展开代码

随机宽度

使用randomWidth属性可以让骨架屏的宽度随机变化。

代码演示

<template>
    <MYSkeleton :randomWidth='true' :count='5' />
</template>

展开代码

动态加载

使用loading属性可以控制骨架屏的显示状态。

代码演示

<template>
    <div>
        <MYButton @click='toggleLoading'>切换加载状态</MYButton>
        <MYSkeleton :loading='isLoading' style='margin-top: 20px'>
            <template #default>
                <div style='padding: 20px; background: #f5f5f5; border-radius: 4px;'>
                    <h3>实际内容标题</h3>
                    <p>这是实际加载完成后的内容...</p>
                </div>
            </template>
        </MYSkeleton>
    </div>
</template>

展开代码

延迟显示

使用throttle属性可以设置骨架屏显示的延迟时间。

代码演示

<template>
    <MYSkeleton :throttle='1000' :loading='throttleLoading' />
</template>

展开代码

主题样式

使用theme属性可以设置骨架屏的主题。

代码演示

<template>
    <div style='display: flex; flex-direction: column; gap: 20px;'>
        <MYSkeleton theme='light' />
        <div style='background: #333; padding: 20px; border-radius: 4px;'>
            <MYSkeleton theme='dark' />
        </div>
    </div>
</template>

展开代码

API 参考

Skeleton Props

参数	说明	类型	可选值	默认值
loading	是否显示骨架屏	boolean	—	true
count	占位行数	number	—	3
randomWidth	占位宽度是否随机	boolean | string	—	false
throttle	显示延迟时间（毫秒）	number	—	0
theme	主题样式	string	'light' | 'dark'	'light'

SkeletonItem Props

参数	说明	类型	可选值	默认值
variant	展示样式	string	text | circle | rect	'text'
width	指定宽度	number | string	—	'100%'
height	指定高度	number | string	—	16

Skeleton Slots

名称	说明
default	实际内容
template	自定义骨架屏模板

类型定义

interface SkeletonProps {
  loading?: boolean;
  animated?: boolean;
  count?: number;
  randomWidth?: boolean | string;
  throttle?: number;
  theme?: 'light' | 'dark';
}

interface SkeletonItemProps {
  variant?: 'text' | 'circle' | 'rect';
  width?: number | string;
  height?: number | string;
}