更新记录

1.0.0（2025-12-07） 下载此版本

appx-empty 是基于 uni-app x 开发的通用空状态展示组件，支持自定义图标、文案、按钮等样式与内容，适配多端展示场景（如暂无数据、加载失败、空列表等），具备灵活的样式配置和完善的容错处理能力。

平台兼容性

uni-app x(4.87)

appx-empty 空状态组件

组件介绍

appx-empty 是基于 uni-app x 开发的通用空状态展示组件，支持自定义图标、文案、按钮等样式与内容，适配多端展示场景（如暂无数据、加载失败、空列表等），具备灵活的样式配置和完善的容错处理能力。

组件使用方式

1. 基础引入

在需要使用的页面/组件中引入：

<template>
  <appx-empty />
</template>

<script lang="uts" setup>

</script>

2. 完整示例（自定义配置）

<template>
  <appx-empty
    icon="/static/empty.png"
    iconSize="100rpx"
    text="暂无订单"
    textColor="#999"
    subText="您还没有产生任何订单，快去下单吧～"
    subTextColor="#ccc"
    buttonText="去下单"
    showButton="true"
    buttonBg="#f56c6c"
    buttonRadius="20px"
    @button-click="handleGoOrder"
  />
</template>

<script lang="uts" setup>

const handleGoOrder = () => {
  // 按钮点击逻辑
  uni.navigateTo({ url: '/pages/order/create' });
};
</script>

属性（Props）说明

事件（Events）说明

样式说明

1. 组件默认采用 flex 布局，容器水平垂直居中，内置默认内边距 40px 20px；
2. 所有样式属性支持传入带单位的值（如 80rpx）或纯数字（组件内部自动适配单位）；
3. 自定义样式（如 iconStyle、textStyle 等）支持两种格式：
   • 对象格式：iconStyle="{ marginBottom: '10px' }"
   • JSON字符串格式：iconStyle='{"marginBottom":"10px"}'（注意单引号包裹，内部双引号）；
4. 按钮点击态默认添加透明度变化（opacity: 0.8），提升交互体验。

注意事项

1. 自定义图标（icon）传入时，建议使用绝对路径（如 /static/empty.png），确保多端兼容；
2. 样式属性传入字符串布尔值时（如 showIcon="false"），组件会自动转换为布尔类型，不区分大小写；
3. 辅助文案（subText）为空时，即使 showSubText 为 true，也不会显示辅助文案区域；
4. 按钮仅在 buttonText 有值且 showButton 为 true 时显示；
5. 样式字符串解析失败时，组件会自动回退到空样式，并在控制台输出警告信息。