xtf-skeleton

组件说明

xtf-skeleton 是加载占位组件，适用于异步内容尚未返回时保持页面结构。支持文章、卡片、表单预设，也支持原子化布局和占位插槽。

基础用法

1. 文章占位

<template><xtf-skeleton :rows="3" /></template>
<script>
export default {}
</script>

2. 预设样式

<template>
  <view><xtf-skeleton preset="avatar-list" /><xtf-skeleton preset="card" animation="pulse" /></view>
</template>
<script>
export default {}
</script>

3. 加载内容与插槽

<template>
  <view>
    <xtf-button label="切换加载" @click="loading = !loading" /><xtf-skeleton
      :loading="loading"
      avatar
      title
      :paragraph="2"
      ><view style="width: 100%; height: 40rpx"
    /></xtf-skeleton>
    <xtf-skeleton :loading="loading">
<template #default><xtf-text level="body" text="数据已加载完成" /></template>
</xtf-skeleton>
  </view>
</template>
<script>
export default {
  data() {
    return { loading: true }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | preset | String | 'article' | article/avatar-list/card/form 预设 | 快速占位 | | rows | String \| Number | 3 | 预设行数 | article/form | | animation | String | 'wave' | wave/pulse 动效 | 加载反馈 | | round | Boolean | true | 占位块圆角 | 视觉风格 | | avatar | Boolean | false | 启用头像原子块 | 自定义布局 | | avatarSize | String \| Number | 88 | 头像尺寸 | avatar 模式 | | avatarShape | String | 'circle' | circle/square | 头像形状 | | title | Boolean | false | 启用标题原子块 | 自定义布局 | | titleWidth | String \| Number | '' | 标题块宽度 | 标题调整 | | loading | Boolean | true | 为否时显示默认插槽内容 | 加载切换 | | paragraph | String \| Number | 0 | 原子模式段落行数 | 自定义布局 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 |

插槽

插槽名	作用	作用域参数	说明
default	加载完成内容或加载时自定义占位块	无	loading 为 false 时显示；loading 为 true 时会启用原子布局并与原子占位块一同渲染

完整插槽示例：

<template>
  <view>
    <xtf-button label="切换加载" @click="loading = !loading" /><xtf-skeleton
      :loading="loading"
      avatar
      title
      :paragraph="2"
      ><view style="width: 100%; height: 36rpx"
    /></xtf-skeleton>
    <xtf-skeleton :loading="loading"><xtf-text level="body" text="数据已加载完成" /></xtf-skeleton>
  </view>
</template>
<script>
export default {
  data() {
    return { loading: true }
  }
}
</script>

---

事件

事件名称	触发时机	回调参数	说明
无	-	-	当前组件未声明或触发自定义事件。加载状态由 loading 属性控制，内容通过默认插槽渲染。

---

主题说明

• 占位背景使用 var(--xtf-color-info-soft)，波纹高光使用 var(--xtf-color-glass)。
• 圆角使用 var(--xtf-radius-md)。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。