vant/src/empty

Empty

Install

import { createApp } from 'vue';
import { Empty } from 'vant';

const app = createApp();
app.use(Empty);

Usage

Basic Usage

<van-empty description="Description" />

Image Type

Use the image prop to display different placeholder images.

<!-- Error -->
<van-empty image="error" description="Description" />
<!-- Network -->
<van-empty image="network" description="Description" />
<!-- Search -->
<van-empty image="search" description="Description" />

Custom Image

<van-empty
  class="custom-image"
  image="https://img.yzcdn.cn/vant/leaf.jpg"
  description="Description"
/>

<style>
  .custom-image img {
    border-radius: 100%;
  }
</style>

Bottom Content

<van-empty description="Description">
  <van-button round type="danger" class="bottom-button"> Button </van-button>
</van-empty>

<style>
  .bottom-button {
    width: 160px;
    height: 40px;
  }
</style>

API

Props

Attribute	Description	Type	Default
image	Image type，can be set to error network search or image URL	string	default
image-size v2.10.11	Image size	number | string	-
description	Desciption	string	-

Slots

Name	Description
default	Custom bottom content
image	Custom image
description	Custom description

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@empty-padding	@padding-xl 0	-
@empty-image-size	160px	-
@empty-description-margin-top	@padding-md	-
@empty-description-padding	0 60px	-
@empty-description-color	@gray-6	-
@empty-description-font-size	@font-size-md	-
@empty-description-line-height	@line-height-md	-
@empty-bottom-margin-top	24px	-