Empty 缺省提示

一般用于兜底占位展示。

内容形态

设置 icon 修改展示缺省图标或图片，默认为 empty。支持内置的常见图标名如 no-result、no-wifi、no-content、no-collection、no-comment、failpayment、no-message。可设置 tip 来控制展示提示文案。

<wd-empty icon="no-result" tip="当前搜索无结果" />
<wd-empty icon="no-wifi" tip="当前网络不可用，请检查你的网络设置" />
<wd-empty icon="no-content" tip="暂无内容" />
<wd-empty icon="no-collection" tip="暂无收藏" />
<wd-empty icon="no-comment" tip="暂无评论" />
<wd-empty icon="failpayment" tip="支付失败，请重新订购" />
<wd-empty icon="no-message" tip="已订阅全部消息" />

组件样式

自定义大小

通过 icon-size 属性自定义图标或图片的大小，默认单位为 px。

<wd-empty :icon-size="140" icon="no-result" tip="当前搜索无结果" />

特殊样式

自定义图片

需要自定义外部图片时，可以直接在 icon 属性中传入完整的图片 URL。

<wd-empty icon="https://wot-ui.cn/assets/panda.jpg" tip="查看我的头像" />

自定义图片内容

使用 image 插槽可以完全自定义图标或图片位置的渲染内容。

<wd-empty tip="自定义图片内容">
  <template #image>
    <wd-icon name="sun-fill" size="100px"></wd-icon>
  </template>
</wd-empty>

自定义底部内容

使用 bottom 插槽可以在提示文本底部渲染自定义内容（如操作交互按钮）。建议在插槽内部包裹一层容器以便于控制与上方内容的间距。

<wd-empty icon="no-content" tip="当前搜索无结果">
  <template #bottom>
    <view class="bottom-actions">
      <wd-button type="info">重新加载</wd-button>
    </view>
  </template>
</wd-empty>

建议样式（可在页面或全局样式中添加）：

.bottom-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
}

Attributes

参数	说明	类型	默认值
icon	缺省图标名称或图片 URL	string	empty
icon-size	图标或图片大小，默认单位为 px	string / number	-
tip	提示文案	string	-

Slots

name	说明
image	自定义图片区域内容 v1.3.12
bottom	自定义底部内容 v1.14.0

外部样式类

类名	说明
custom-class	根节点样式
custom-style	根节点样式

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-empty-icon-color	$icon-disabled	图标颜色
--wot-empty-text-font-size	$typography-body-size-extra-large	文案字号
--wot-empty-text-line-height	$typography-body-line--height-size-extra-large	文案行高
--wot-empty-text-font-weight	$typography-body-font-weight-strong	文案字重
--wot-empty-text-color	$text-main	文案颜色
--wot-empty-text-margin-top	$spacing-loose	文案顶部间距
--wot-empty-icon-size	$n-98	图标尺寸
--wot-empty-padding-bottom	$spacing-ultra-loose	组件底部内边距

源代码

文档

• 组件