::: anchor
:::

::: title 基本介绍
:::

::: describe 在需要等待加载内容的位置提供一个占位图形组合。
:::

::: title 基础使用
:::

::: demo 使用 `lay-skeleton` 标签, 创建骨架屏

<template>
<div>
<div style="margin-bottom: 10px">
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
</div>
  <lay-skeleton :rows="4" :loading="loading" animated>
    <p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
    <p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
    <p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
    <p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
  </lay-skeleton>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const loading = ref(true);
    return {
        loading,
    }
  }
}
</script>

:::

::: title 图片
:::


::: demo

<template>
<div>
<div style="margin-bottom: 10px">
<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
</div>
  <lay-skeleton :loading="loading" animated>
        <template #skeleton>
            <lay-skeleton-item type="image"/>
            <lay-skeleton-item type="p" style="width: 240px"/>
        </template>
    <div class="img-content">
        <img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
        <p style="margin-top: 18px">layui-vue 发展史....</p>
    </div>
  </lay-skeleton>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const loading = ref(true);
    return {
        loading,
    }
  }
}
</script>

<style>
    .img-content {
        width: 240px;
        height: 240px;
    }
</style>

:::

::: title Skeleton 属性
:::

::: table

| 属性  | 描述 | 可选值 |
| ----- | ---- | ------ |
| loading | 是否显示 | `true` `false`     |
| rows | 显示行数 | --     |
| animated | 是否动画 | `true` `false`    |
| type | 展示类型 | `p` `image`    |

:::

::: title Skeleton 插槽
:::

::: table

| 插槽   | 描述     | 可选值 |
| ------ | -------- | ------ |
| default| 默认插槽 | --     |
| skeleton | 自定义插槽 | --     |

:::

 

::: previousNext skeleton
:::