xtf-empty

组件说明

xtf-empty 是空状态组件，用于在数据为空时展示占位提示。支持多种预设类型（默认/网络/搜索/消息/收藏/订单/通知/404/403/500）、自定义图片、图标、描述文字和操作按钮，适用于列表为空、加载失败和权限限制等场景。

---

基础用法

1. 默认空状态

通过 type 使用预设空状态：

<template>
  <xtf-empty type="default" />
</template>

2. 不同预设类型

<template>
  <view style="display: flex; flex-direction: column; gap: 48rpx">
    <xtf-empty type="network" />
    <xtf-empty type="search" />
    <xtf-empty type="message" />
    <xtf-empty type="404" />
  </view>
</template>

3. 自定义内容

通过 title、desc 和 image 自定义内容：

<template>
  <xtf-empty title="暂无商品" desc="快去添加第一件商品吧！" image="/static/empty-product.png" />
</template>

4. 带操作按钮

通过 actionText 设置操作按钮文字：

<template>
  <xtf-empty type="network" action-text="重新加载" @action="onReload" />
</template>

<script>
export default {
  methods: {
    onReload() {
      console.log('重新加载')
    }
  }
}
</script>

5. 自定义图片与操作插槽

<template>
  <xtf-empty title="收藏为空">
    <template #image>
      <xtf-icon name="favorite" theme="danger" size="xl" variant="soft" padding="32rpx" round
    /></template>
    <template #action><xtf-button label="去浏览" @click="goBrowse" /></template>
  </xtf-empty>
</template>

<script>
export default {
  methods: {
    goBrowse() {
      uni.showToast({ title: '跳转浏览页', icon: 'none' })
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
type	String	'default'	预设类型：'default' / 'network' / 'search' / 'message' / 'favorite' / 'order' / 'notice' / '404' / '403' / '500'	预设类型
image	String	''	自定义图片 URL	自定义图片
title	String	''	标题文字	标题
desc	String	''	描述文字	描述
icon	String	''	自定义图标名称	图标
iconSize	String | Number	'xl'	图标大小	图标大小
imageSize	String | Number	''	图片大小	图片尺寸
theme	String	'primary'	主题色	主题
actionText	String	''	操作按钮文字	操作按钮
compact	Boolean	false	是否紧凑模式	紧凑
float	Boolean	true	是否浮动动画	动画
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
action	点击操作按钮时触发	(event)	事件对象
click	点击操作按钮时触发	(event)	事件对象

---

插槽

插槽名称	说明
image	自定义图片区域
action	自定义操作按钮区域

上方第五个示例同时展示了 image 与 action 的实际插槽用法。

---

主题说明

• 图标使用 xtf-icon 组件
• 标题使用 xtf-text 组件
• 描述使用 xtf-text 组件
• 操作按钮使用 xtf-button 组件
• 支持浮动动画效果

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。