zx-skeleton-item 骨架屏项组件

zx-skeleton-item是骨架屏的子组件，用于构建不同形状和大小的骨架占位元素，通常与zx-skeleton组件配合使用，用于内容加载时显示的占位图形。

使用方法

基础用法

<template>
  <zx-skeleton-item variant="text" />
  <zx-skeleton-item variant="circle" :size="40" />
  <zx-skeleton-item variant="rect" :width="120" :height="40" />
</template>

<script setup>
import ZxSkeletonItem from '@/components/zx-skeleton-item/zx-skeleton-item.vue';
</script>

组合使用

通常与zx-skeleton组件配合使用：

<template>
  <zx-skeleton :loading="loading" animated>
    <template #template>
      <div style="display: flex; align-items: center;">
        <zx-skeleton-item variant="circle" :size="40" />
        <div style="margin-left: 12px;">
          <zx-skeleton-item variant="text" style="width: 200px; margin-bottom: 8px;" />
          <zx-skeleton-item variant="text" style="width: 150px;" />
        </div>
      </div>
    </template>
    
    <template #default>
      <div class="content">
        <!-- 实际内容 -->
      </div>
    </template>
  </zx-skeleton>
</template>

<script setup>
import { ref } from 'vue';
import ZxSkeleton from '@/components/zx-skeleton/zx-skeleton.vue';
import ZxSkeletonItem from '@/components/zx-skeleton-item/zx-skeleton-item.vue';

const loading = ref(true);

// 模拟数据加载
setTimeout(() => {
  loading.value = false;
}, 2000);
</script>

API

Props

| 参数 | 说明 | 类型 | 默认值 | |-----------|---------------------|-----------------------------------------------------|---------| | variant | 骨架屏的形状 | string: text / circle / rect / p / h1 / h3 / button / caption / image | text | | width | 宽度 | string / number | - | | height | 高度 | string / number | - | | size | 圆形骨架的大小，相当于同时设置width和height | string / number | - | | round | 是否为圆角 | boolean | false | | circle | 是否为圆形 | boolean | false | | active | 是否展示动画效果 | boolean | false |

内置类型（variant）

• text: 文本行，默认样式
• p: 段落，比text略高
• h1: 大标题
• h3: 小标题
• caption: 说明文字
• button: 按钮
• image: 图片
• circle: 圆形
• rect: 矩形

样式自定义

组件支持通过style和class自定义样式：

<template>
  <zx-skeleton-item 
    variant="text" 
    style="width: 200px; margin-bottom: 8px;" 
    class="custom-skeleton-item"
  />
</template>

示例

不同形状组合

<template>
  <view class="skeleton-demo">
    <!-- 头像 + 文本 -->
    <view class="skeleton-item">
      <zx-skeleton-item variant="circle" :size="50" />
      <view class="skeleton-content">
        <zx-skeleton-item variant="h3" style="width: 150px; margin-bottom: 12px;" />
        <zx-skeleton-item variant="text" style="width: 240px;" />
      </view>
    </view>
    
    <!-- 图片 + 文本 -->
    <view class="skeleton-item">
      <zx-skeleton-item variant="image" :width="100" :height="100" />
      <view class="skeleton-content">
        <zx-skeleton-item variant="h3" style="width: 180px; margin-bottom: 12px;" />
        <zx-skeleton-item variant="text" style="width: 240px; margin-bottom: 8px;" />
        <zx-skeleton-item variant="text" style="width: 200px;" />
      </view>
    </view>
    
    <!-- 按钮 -->
    <view class="skeleton-item">
      <zx-skeleton-item variant="button" :width="120" :height="40" />
    </view>
  </view>
</template>

<style>
.skeleton-demo {
  padding: 20px;
}
.skeleton-item {
  display: flex;
  margin-bottom: 20px;
}
.skeleton-content {
  margin-left: 12px;
  flex: 1;
}
</style>

带动画效果

为骨架屏项添加动画效果，可以设置active属性：

<template>
  <zx-skeleton-item variant="text" :active="true" style="width: 200px;" />
</template>

兼容性

• 支持H5、App以及各主流小程序平台
• 低版本设备可能不支持部分动画效果