当网络加载较慢，或者你希望得到一个过渡性的加载效果时，Skeleton 组件显得尤为合适。

相对比普通的 loading 效果，Skeleton 组件能体现出真实内容的大致轮廓，提供的用户体验会更好！

基本展示

展开查看代码

<template>
    <j-skeleton :loading="true">内容</j-skeleton>
</template>

更多内容

配置avatar属性展示头像占位。

展开查看代码

<template>
    <j-skeleton :loading="true" avatar>内容</j-skeleton>
</template>

开启动画效果

通过active属性开启动画。

展开查看代码

<template>
    <div>
        <j-switch v-model:checked="loading" style="margin-bottom: 20px" />
        <j-skeleton :loading="loading" avatar active>
            <div>内容</div>
        </j-skeleton>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(true)

setTimeout(() => {
    loading.value = false
}, 3000)
</script>

其他子组件

可供单独使用的子组件。

展开查看代码

<template>
    <div>
        <j-skeleton-image style="margin-top: 20px" active />
        <j-skeleton-title style="margin-top: 20px" active />
        <j-skeleton-paragraph style="margin-top: 20px" active />
        <j-skeleton-avatar style="margin-top: 20px" active />
        <j-skeleton-input style="margin-top: 20px; margin-left: 10px" active />
        <j-skeleton-image style="margin-top: 20px; margin-left: 10px" active />
        <j-skeleton-button style="margin-top: 20px; margin-left: 10px" active />
    </div>
</template>

自定义 Skeleton 组合

考虑到预设的 Skeleton 元素组合并不能满足所有场景，我们提供了插槽和属性支持在 Skeleton 组件下自定义布局和自由组合占位元素。

展开查看代码

<template>
    <j-switch v-model:checked="loading" style="margin-bottom: 20px" @change="onChange" />

    <j-skeleton :loading="loading" active>
        <div>内容</div>

        <template #customNodes>
            <div style="flex: 1">
                <j-space>
                    <j-skeleton-avatar />
                    <j-skeleton-input />
                    <j-skeleton-button />
                </j-space>

                <div style="display: flex">
                    <j-skeleton-image style="margin-top: 20px" />
                    <div style="flex: 1; margin-left: 10px">
                        <j-skeleton-title style="margin-top: 20px" />
                        <j-skeleton-paragraph :rows="2" style="margin-top: 20px" />
                    </div>
                </div>
            </div>
        </template>
    </j-skeleton>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(true)

const refresh = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 10000)
}

refresh()

const onChange = (value: boolean) => {
    if (value) {
        refresh()
    }
}
</script>

属性

参数	说明	类型	默认值	必填
loading	值为true时，代表加载状态，展示骨架屏，否则直接展示子组件。	boolean	无	否
active	是否激活动画效果，如果开启，会对 Skeleton 下的其他占位组件生效，但不会覆盖各组件另行指定的 active 属性值。	boolean	无	否
avatar	头像配置	boolean | SkeletonAvatarProps	无	否
paragraph	段落配置	boolean | SkeletonParagraphProps	true	否
title	标题配置	boolean | SkeletonTitleProps	true	否
customNodes	自定义骨架屏元素	VNode	无	否

SkeletonAvatarProps

参数	说明	类型	默认值	必填
active	是否激活动画效果	boolean	undefined	否
shape	头像的形状	"circle" | "square"	'circle'	否
size	头像的尺寸	number | "small" | "default" | "large"	'default'	否

SkeletonButtonProps

参数	说明	类型	默认值	必填
active	是否激活动画效果	boolean	undefined	否

SkeletonImageProps

参数	说明	类型	默认值	必填
active	是否激活动画效果	boolean	undefined	否
wrapperSize	图片占位容器的尺寸	string | number	无	否
size	图片内容的尺寸	string | number	无	否
customImage	自定义占位图	VNode	无	否

SkeletonInputProps

参数	说明	类型	默认值	必填
active	是否激活动画效果	boolean	undefined	否

SkeletonParagraphProps

参数	说明	类型	默认值	必填
active	是否激活动画效果	boolean	undefined	否
rows	段落占位行数	number	2	否
width	段落占位的宽度配置，值为数组则对应每行的宽度，反之代表最后一行的宽度	string | number | Array<string | number>	无	否

SkeletonTitleProps

参数	说明	类型	默认值	必填
active	是否激活动画效果	boolean	undefined	否
width	标题占位的宽度	string | number	'50%'	否