BizSkeleton 业务骨架屏

按中后台页面真实结构编排的骨架屏：预设模板 table（工具栏 + 表头 + 数据行）、list（头像 + 标题 + 描述）、card（封面网格）、detail（标题 + 字段组）、form（标签 + 输入框）、search（搜索栏）；blocks 自定义段落组合（text / rect / circle / button）；animated 动画开关、loaded 置 true 整体卸载。页面首屏与路由切换的加载占位——与 BizEmpty（空态）、loading 过程态互补，补齐「骨架态」。

基础用法

动画

list 预设 + rows 条数 + animated 动画开关。

<script setup lang="ts">
/** 场景：列表页骨架——list 预设 + rows 条数 + 动画开关 */
import { ref } from 'vue'
import { ElSwitch } from 'element-plus'
import { BizSkeleton } from 'vue3-ep-biz-lib'

const animated = ref(true)
</script>

<template>
  <div style="max-width: 640px">
    <div style="margin-bottom: 10px; display: flex; align-items: center; gap: 8px">
      <span style="font-size: 13px">动画</span>
      <ElSwitch v-model="animated" />
    </div>
    <BizSkeleton preset="list" :rows="4" :animated="animated" />
  </div>
</template>

显示代码

表格页

table 预设：工具栏按钮 + 搜索框 + 表头 + 数据行，贴合 CRUD 页首屏结构。

<script setup lang="ts">
/** 场景：表格页骨架——table 预设：工具栏 + 表头 + 数据行 */
import { BizSkeleton } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizSkeleton preset="table" :rows="6" />
</template>

显示代码

卡片网格

card 预设：封面 + 标题 + 描述，minmax(200px, 1fr) 自适应栅格。

<script setup lang="ts">
/** 场景：卡片网格骨架——card 预设，自适应栅格 */
import { BizSkeleton } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizSkeleton preset="card" :rows="4" />
</template>

显示代码

详情页

detail 预设：头像标题头部 + 描述字段组。

<script setup lang="ts">
/** 场景：详情页骨架——detail 预设：头像标题 + 描述字段组 */
import { BizSkeleton } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 640px">
    <BizSkeleton preset="detail" :rows="5" />
  </div>
</template>

显示代码

表单与搜索栏

search + form 预设组合，覆盖查询表单页首屏。

<script setup lang="ts">
/** 场景：表单与搜索栏——form / search 预设组合 */
import { BizSkeleton } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 640px">
    <BizSkeleton preset="search" />
    <BizSkeleton preset="form" :rows="4" />
  </div>
</template>

显示代码

加载切换

loaded 控制骨架 / 真实内容切换（v-if 卸载骨架）；blocks + direction="row" 自定义段落组合。

<script setup lang="ts">
/** 场景：加载切换——loaded 控制骨架 / 内容过渡；blocks 自定义段落组合 */
import { ref } from 'vue'
import { ElButton, ElTable, ElTableColumn } from 'element-plus'
import { BizSkeleton } from 'vue3-ep-biz-lib'

const loading = ref(true)

const rows = [
  { id: 1, name: '华东大区', amount: '¥126,300', owner: '王磊' },
  { id: 2, name: '华南大区', amount: '¥98,720', owner: '李娜' },
  { id: 3, name: '华北大区', amount: '¥152,050', owner: '张敏' },
]

const reload = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1500)
}
</script>

<template>
  <div style="max-width: 680px">
    <div style="margin-bottom: 12px; display: flex; align-items: center; gap: 12px">
      <ElButton size="small" :disabled="loading" @click="reload">模拟重新加载</ElButton>
      <template v-if="loading">
        <BizSkeleton
          direction="row"
          :blocks="[
            { shape: 'circle', width: 28 },
            { shape: 'text', width: '30%' },
            { shape: 'rect', width: 120, height: 20 },
          ]"
        />
      </template>
    </div>
    <BizSkeleton v-if="loading" preset="table" :rows="4" />
    <ElTable v-else :data="rows">
      <ElTableColumn prop="name" label="区域" />
      <ElTableColumn prop="amount" label="销售额" />
      <ElTableColumn prop="owner" label="负责人" />
    </ElTable>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
preset	'table' | 'list' | 'card' | 'detail' | 'form' | 'search'	—	预设模板（为空时渲染 blocks）
rows	number	4	条目重复次数（table 数据行 / list / card 条数）
animated	boolean	true	闪烁动画
blocks	BizSkeletonBlock[]	[]	自定义段落（shape / width / height）
direction	'column' | 'row'	'column'	自定义段落排列方向
loaded	boolean	false	加载完成：true 时整体隐藏（配合 v-show）

Slots

插槽名	说明
—	暂无（预设结构固定，特殊页面用 blocks 组合）

TIP

骨架与内容切换建议 v-if 卸载骨架（如 loaded 示例）避免残留 DOM；组件基于 ElSkeletonItem 渲染，继承其视觉风格与主题变量。