layui/example/docs/zh-CN/components/skeleton.md

::: anchor :::

::: title 基本介绍 :::

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

::: title 基础使用 :::

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

1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式

2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式

3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式

4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式

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

:::

::: title 图片 :::

::: demo

layui-vue 发展史....

<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	自定义插槽	--

:::

::: comment :::

::: previousNext skeleton :::