引入组件

局部引入

// parent.vue
const FSkeleton = defineAsyncComponent(() => import('@/components/formaui/f-skeleton/f-skeleton.vue'))

基础用法

骨架屏通过默认插槽包裹页面内容，在数据加载期间用占位块覆盖真实内容。需要占位显示的元素须添加 skeleton-rect 类名；loading 为 true 时显示骨架，false 时展示插槽内容。

<f-skeleton class="px-[24rpx]" :loading="loading" bg-color="#FFF">
  <image class="skeleton-rect w-full h-[375rpx]" src="/static/images/wait.gif"></image>
  <view class="mt-3 flex justify-end items-center">
    <image
      class="skeleton-rect w-[42rpx] h-[42rpx] rounded-[50%]"
      data-radius="50%"
      src="/static/images/avatar.jpg"></image>
    <text class="skeleton-rect ml-[22rpx]">---我知道你会来，所以我会等。</text>
  </view>
</f-skeleton>

import { ref } from 'vue'

const loading = ref(true)

// 数据就绪后关闭骨架屏
setTimeout(() => {
  loading.value = false
}, 1800)

skeleton-rect 类名：标记需要骨架占位的元素

组件会在挂载后查找插槽内所有 .skeleton-rect 节点，按其实际位置与尺寸绘制占位块。

data-radius 属性：自定义占位块圆角

圆形头像等场景可在元素上设置 data-radius，例如 data-radius="50%"。

bgColor 属性：容器背景色（默认var(--f-page-color)）

<f-skeleton :loading="loading" bg-color="#FFF">
  <!-- 插槽内容 -->
</f-skeleton>

skeletonBgColor 属性：占位块背景色（默认#E9E9E9）

<f-skeleton :loading="loading" skeleton-bg-color="#F5F5F5">
  <!-- 插槽内容 -->
</f-skeleton>

isAnimate 属性：是否显示流光动画（默认true）

<f-skeleton :loading="loading" :is-animate="false">
  <!-- 插槽内容 -->
</f-skeleton>

插槽

名称	说明
default	页面真实内容区域

属性

名称	类型	说明	默认值
loading	boolean	是否显示骨架屏	-
bgColor	string	容器背景颜色	var(--f-page-color)
skeletonBgColor	string	占位块背景颜色	#E9E9E9
isAnimate	boolean	是否显示流光动画	true

事件

事件名	说明	回调参数
-	-	-