Empty 空状态

介绍

空状态时的占位提示。

引入

app.jsonindex.json中引入组件,默认为ES6版本,ES5引入方式参见快速上手

  1. "usingComponents": {
  2. "van-empty": "@vant/weapp/empty/index"
  3. }

代码演示

基础用法

  1. <van-empty description="描述文字" />

图片类型

Empty 组件内置了多种占位图片类型,可以在不同业务场景下使用。

  1. <!-- 通用错误 -->
  2. <van-empty image="error" description="描述文字" />
  3. <!-- 网络错误 -->
  4. <van-empty image="network" description="描述文字" />
  5. <!-- 搜索提示 -->
  6. <van-empty image="search" description="描述文字" />

自定义图片

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

  1. <van-empty
  2. class="custom-image"
  3. image="https://img.yzcdn.cn/vant/custom-empty-image.png"
  4. description="描述文字"
  5. />

底部内容

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

  1. <van-empty description="描述文字">
  2. <van-button round type="danger" class="bottom-button">
  3. 按钮
  4. </van-button>
  5. </van-empty>
  6. <style>
  7. .bottom-button {
  8. width: 160px;
  9. height: 40px;
  10. }
  11. </style>

API

Props

参数说明类型默认值
image图片类型,可选值为 error network search,支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字

Empty 空状态 - 图1