Skeleton 骨架屏

基本使用

<pk-skeleton>
    <pk-skeleton-avatar></pk-skeleton-avatar>
    <pk-skeleton-paragraph></pk-skeleton-paragraph>
</pk-skeleton>

代码示例

基础用法

默认创建的是一个带有头像、标题、和三行段落的骨架屏。

template

    <pk-skeleton :loading="true"></pk-skeleton>

script

style

动画

可通过设置pk-skeleton的active属性为false关闭动画。

template

    <pk-skeleton :loading="true" :active="false"></pk-skeleton>

script

style

头像

可通过设置pk-skeleton的avatar属性为false关闭头像。

template

    <pk-skeleton :loading="true" :avatar="false"></pk-skeleton>

script

style

标题

可通过设置pk-skeleton的title属性为false关闭标题。

template

    <pk-skeleton :loading="true" :title="false"></pk-skeleton>

script

style

段落

可通过设置pk-skeleton的paragraph属性为false关闭段落。

template

    <pk-skeleton :loading="true" :paragraph="false"></pk-skeleton>

script

style

自定义段落行数

可通过设置pk-skeleton的rows属性来设置段落的行数。

template

    <pk-skeleton :loading="true" :rows="6"></pk-skeleton>

script

style

API

Props

Skeleton Props

属性名	说明	类型	默认值	可选值
loading	加载中	boolean	true
active	显示动画	boolean	true
avatar	显示头像	boolean	true
title	显示标题	boolean	true
paragraph	显示段落	boolean	true
rows	段落行数	number	3

SkeletonAvatar Props

属性名	说明	类型	默认值	可选值
active	显示动画，默认与父级Skeleton一致	boolean
size	头像大小，单位为px	number
shape	头像形状	'circle'｜'square'	circle	'circle'｜'square'

SkeletonParagraph Props

属性名	说明	类型	默认值	可选值
active	显示动画，默认与父级Skeleton一致	boolean
rows	段落行数	number	1
widths	段落各行的长度,数字为百分比	(string｜number)[]	[]

Events

事件名	说明	回调参数

Slots

Skeleton Slots

插槽名	说明	作用域
default	内容区域
template	自定义骨架屏模板

示例

template

    <pk-skeleton :loading="true">
        <template #template>
            <pk-skeleton-avatar></pk-skeleton-avatar>
            <pk-skeleton-paragraph :rows="3" :widths="['80%', 90, 100]"></pk-skeleton-paragraph>
            <pk-skeleton-paragraph></pk-skeleton-paragraph>
        </template>
    </pk-skeleton>

script

style

Exposes

名称	说明	类型说明

样式变量

Skeleton

名称	默认值	说明
--pk-skeleton-background-start	rgba(237, 239, 242, 1)
--pk-skeleton-background-end	rgba(237, 239, 242, 0.6)
--pk-skeleton-duration	1.3s
--pk-skeleton-margin	var(--pk-margin-m)

SkeletonAvatar

名称	默认值	说明
--pk-skeleton-avatar-size	40px

SkeletonParagraph

名称	默认值	说明
--pk-skeleton-paragraph-height	12px
--pk-skeleton-paragraph-border-radius	2px
--pk-skeleton-paragraph-margin	var(--pk-margin-m) 0 0 0