vant/src-next/empty/README.md

Empty

Install

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

Vue.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
description	Desciption	string	-

Slots

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