Skip to content

empty

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

empty

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
test
test
 
 
Network.tsx
Network.tsx
 
 
README.md
README.md
 
 
README.zh-CN.md
README.zh-CN.md
 
 
index.js
index.js
 
 
index.less
index.less
 
 

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