更新记录

1.3.1028（2026-10-28） 下载此版本

• 修复 height 单位判断错误：传 vh/%/calc() 时被强制回退成 320rpx，导致自定义高度失效
• 修复 imgSize 不传时输出非法样式 width:rpx;height:rpx
• 修复带单位字符串（如 240rpx）被拼成 240rpxrpx
• 修复图片地址带 query/hash（a.jpg?t=1）、大写扩展名、base64/blob 无法识别的问题
• 兼容 Vue3 + Vite：无 require 环境下自动回退内置图路径，不再报 require is not defined
• 兼容小程序构建把 svg 内联成 base64 导致内置图不显示的问题
• 样式改为 scoped + BEM 类名，避免 .text/.slot 全局污染页面
• 移除 padding 的 !important，支持行内 style 覆盖；文字增加左右留白与长文案换行
• 新增 mode 属性、图片加载失败自动隐藏、--o-empty-text-color 主题变量
• 默认背景/内边距改由 CSS 变量承载（--o-empty-bg、--o-empty-padding），bg 默认值置空，避免行内样式压住页面 class；微信小程序补 styleIsolation: apply-shared
• 示例页修正自定义图片的相对路径写法（各端通用根路径）

1.3.0（2026-10-28） 下载此版本

1.3.1028（2026-10-28）

• 修复 height 单位判断错误：传 vh/%/calc() 时被强制回退成 320rpx，导致自定义高度失效
• 修复 imgSize 不传时输出非法样式 width:rpx;height:rpx
• 修复带单位字符串（如 240rpx）被拼成 240rpxrpx
• 修复图片地址带 query/hash（a.jpg?t=1）、大写扩展名、base64/blob 无法识别的问题
• 兼容 Vue3 + Vite：无 require 环境下自动回退内置图路径，不再报 require is not defined
• 兼容小程序构建把 svg 内联成 base64 导致内置图不显示的问题
• 样式改为 scoped + BEM 类名，避免 .text/.slot 全局污染页面
• 移除 padding 的 !important，支持行内 style 覆盖；文字增加左右留白与长文案换行
• 新增 mode 属性、图片加载失败自动隐藏、--o-empty-text-color 主题变量
• 默认背景/内边距改由 CSS 变量承载（--o-empty-bg、--o-empty-padding），bg 默认值置空，避免行内样式压住页面 class；微信小程序补 styleIsolation: apply-shared
• 示例页修正自定义图片的相对路径写法（各端通用根路径）

1.2.0604（2025-06-04） 下载此版本

• 优化 代码和样式兼容性

平台兼容性

uni-app(3.8.10)

uni-app x(3.8.10)

其他

o-empty 暂无数据 缺省页 空白数据 占位提示组件

描述

Empty 简单易用 暂无数据 缺省页 空白数据 占位提示组件

使用方法

<template>
    <view class="page">
        <view class="title">基本用法</view>
        <o-empty />

        <view class="title">自定义背景色（支持渐变）</view>
        <o-empty img="error" bg="#E5F1FB" text="内容整理中.." />
        <o-empty img="error" bg="linear-gradient(180deg, #fff 0%, #D7D2C3 100%)" text="渐变背景" />

        <view class="title">自定义图片大小（数字默认 rpx，也可带单位）</view>
        <o-empty img="search" text="无搜索记录" imgSize="200" />
        <o-empty img="search" text="带单位写法" imgSize="240rpx" />

        <view class="title">自定义占位高度：只是最小高度，内容超出会被撑开</view>
        <o-empty img="search" img-size="120" height="320rpx" />
        <o-empty img="search" img-size="120" :height="300" text="数字写法 = 300rpx" />
        <o-empty img="search" img-size="120" height="calc(60vh - 100rpx)" text="支持 calc()" />

        <view class="title">自定义插槽内容</view>
        <o-empty img="network" text="网络中断">
            <button type="primary" size="mini">重新加载</button>
        </o-empty>

        <view class="title">自定义图片：绝对路径各端通用</view>
        <o-empty img="/static/icon.png" img-size="180" text="自定义图片" height="50vh" />

        <view class="title">网络图片（带查询参数也能识别）</view>
        <o-empty
            img="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg?x-oss-process=image/resize,w_200"
            img-size="180"
            text="网络图片"
        />

        <view class="title">长文案自动换行、不贴边</view>
        <o-empty text="这里是一段比较长的缺省文案，用来验证在小屏设备上的换行与左右留白是否正常，避免文字顶到屏幕边缘。" />
    </view>
</template>

注意事项

• 图片路径：组件内所有图片最终都交给 image 组件的 src，推荐使用 /static/xxx.png 这类根路径。相对路径（../static/a.png）在 H5 与小程序下的解析基准不同，容易出现“H5 正常、小程序空白”，不建议使用；@/static/a.png 会被自动转换为 /static/a.png。
• 自定义内边距：默认 padding: 64rpx 0，通过 CSS 变量覆盖（不受 scoped 优先级影响）：.o-empty{ --o-empty-padding:0 }；也可写行内样式 <o-empty style="padding:0" />。
• 主题变量：--o-empty-bg（背景，默认 #fff）、--o-empty-text-color（文字色，默认 #969798）、--o-empty-text-size（文字大小，默认 28rpx）、--o-empty-padding（内边距）。
• 只显示文字：img-size="0" 可隐藏缺省图。

API

oEmpty Props

Slots

兼容性说明

• Vue2 / Vue3（webpack、Vite）均可使用，内置图在无 require 环境（Vite）下自动回退为绝对路径。
• H5、App（vue）、各家小程序通用；virtualHost 仅微信小程序生效，不产生额外节点。
• 组件样式已开启 scoped，内部类名为 o-empty__img / o-empty__text / o-empty__slot，不会污染页面样式。
• 图片加载失败会自动隐藏图片（@error），避免出现破图。