Empty 内容为空

17:06

说明

内容为空时的占位提示，内置十余个场景图标（mode），支持自定义文案、颜色与尺寸；也可用 src 直接指定图标或图片，并提供 bottom 插槽在底部追加操作按钮。

兼容性

平台	支持情况
App	✅ 支持
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

通过 text 配置提示文字，mode 配置图标类型。

查看源码

<template>
    <ux-empty text="暂无数据" mode="data" />
</template>

内置图标和文字

通过 mode 参数选择不同的场景图标。

查看源码

<template>
    <view class="empty-icons">
        <view class="empty-icon-item"><ux-empty mode="car" /></view>
        <view class="empty-icon-item"><ux-empty mode="list" /></view>
        <view class="empty-icon-item"><ux-empty mode="search" /></view>
        <view class="empty-icon-item"><ux-empty mode="order" /></view>
        <view class="empty-icon-item"><ux-empty mode="address" /></view>
        <view class="empty-icon-item"><ux-empty mode="favor" /></view>
    </view>
</template>

<style scoped>
.empty-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.empty-icon-item {
    width: 50%;
}
</style>

自定义颜色和大小

通过 color/icon-color 自定义颜色，icon-size/font-size 自定义大小。

查看源码

<template>
    <ux-empty text="自定义颜色" mode="data" color="#2979ff" icon-color="#2979ff" :icon-size="80" :font-size="15" />
</template>

自定义图片 src

通过 src 传入图片路径，mode 参数会失效。

查看源码

<template>
    <ux-empty text="自定义图片" src="/static/logo.png" />
</template>

bottom 插槽

通过 bottom 插槽在组件底部添加自定义内容。

查看源码

<template>
    <ux-empty text="没有更多数据了">
        <template #bottom>
            <ux-button type="primary" size="small" shape="round" @click="onReload">重新加载</ux-button>
        </template>
    </ux-empty>
</template>

<script setup lang="uts">
const onReload = () => {
    uni.showToast({ title: '点击了重新加载', icon: 'none' });
};
</script>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
src	图标路径	string	''	-
text	提示文字	string	''	-
color	文字颜色	string	''	-
iconColor	图标的颜色	string	''	-
iconSize	图标的大小	string | number	DEFAULT_ICON_SIZE	-
fontSize	文字大小，单位px	string | number	DEFAULT_FONT_SIZE	-
mode	选择预置的图标类型	EmptyMode	'data'	-
imgWidth	图标宽度，单位px	string | number	60	-
imgHeight	图标高度，单位px	string | number	'auto'	-
show	是否显示组件	boolean	true	-
marginTop	组件距离上一个元素之间的距离	string | number	10	-

Events

ux-empty 无事件。

Slots

插槽名	说明	版本
bottom	组件底部插槽，用于追加自定义内容（如「重新加载」按钮），外层固定上间距并水平居中	-

注意事项

1. src 优先于 mode：一旦传入 src，内置图标（mode）即失效。src 会透传给 ux-icon，含 / 的路径或 base64 按图片渲染，否则按图标名处理。
2. img-width / img-height 只在 src 模式下生效，mode 内置图标不受其影响。
3. text 留空时回落到 mode 对应的内置 i18n 文案，而不是不显示文字。
4. icon-size / font-size 走三级优先：显式传入 > 全局覆盖（componentProps['ux-empty']）> 内建默认（60 / 13）。
5. show=false 时整个组件 v-if 卸载，不会渲染占位节点。
6. bottom 插槽外层固定 margin-top: 10px 并水平居中，无需在插槽内容里再补间距。
7. mode 取值来自 EmptyMode 联合类型：car / page / search / address / wifi / order / coupon / favor / permission / history / news / message / list / data，演示只展示了其中 6 个。