vant/src/empty

Empty

Intro

Occupation reminder when empty.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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	Image size	number | string	-
description	Description	string	-

Slots

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

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

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