更新记录

0.0.5（2025-08-31） 下载此版本

• chore: 更新文档

0.0.4（2025-05-10） 下载此版本

• fix: 修复缺少依赖lime-style的问题

0.0.3（2025-05-07） 下载此版本

• fix: 消除_ctx.image != null这种警告
• feat: 增加组件提示

平台兼容性

云端兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-empty 空状态组件

一个功能丰富的空状态组件，内置12种常见场景的占位图，支持自定义图片和描述文字。可用于列表为空、网络错误、404页面等多种场景。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 空状态组件文档 - 站点1
• 空状态组件文档 - 站点2
• 空状态组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-empty
2. 导入后可能需要重新编译项目
3. 在页面中使用l-empty组件

代码演示

基础用法

最简单的空状态组件用法，只需要设置描述文字即可。

<l-empty description="空空如也" />

内置场景

组件内置了12种常见场景的占位图：

<!-- 通用错误 -->
<l-empty image="error" description="出错了" />
<!-- 购物车 -->
<l-empty image="cart" description="购物车空荡荡" />
<!-- 404 -->
<l-empty image="404" description="糟糕,您要访问的页面已丢失" />
<!-- 网络错误 -->
<l-empty image="network" description="网络连接异常" />
<!-- 搜索提示 -->
<l-empty image="search" description="没有找到相关内容" />
<!-- 评论提示 -->
<l-empty image="comment" description="还没有评论,赶紧抢个沙发" />
<!-- 订单提示 -->
<l-empty image="order" description="还没有订单哦" />
<!-- 快递提示 -->
<l-empty image="express" description="还没有快递" />
<!-- 消息提示 -->
<l-empty image="message" description="暂无消息哦" />
<!-- 优惠券提示 -->
<l-empty image="coupon" description="没有优惠券呢" />
<!-- 地址提示 -->
<l-empty image="address" description="您还没填写收货地址哦" />
<!-- 开发中提示 -->
<l-empty image="developing" description="功能正在开发中，敬请期待" />
<!-- 维护中提示 -->
<l-empty image="maintenance" description="系统维护中，请稍后再试" />

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<l-empty
  image="https://example.com/custom-image.png"
  image-size="80"
  description="描述文字"
/>

底部内容

通过默认插槽可以在空状态组件的下方插入内容。

<l-empty description="描述文字">
  <button type="primary">刷新</button>
</l-empty>

API

Props

主题定制

组件提供了下列 CSS 变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助