feat: add Empty component (#6010)

This commit is contained in:
neverland
2020-04-07 17:43:19 +08:00
committed by GitHub
parent 14299a2011
commit 525f7ecb88
12 changed files with 458 additions and 0 deletions
+80
View File
@@ -0,0 +1,80 @@
# Empty
### Install
```js
import Vue from 'vue';
import { Empty } from 'vant';
Vue.use(Empty);
```
## Usage
### Basic Usage
```html
<van-empty description="Description" />
```
### Image Type
Use the image prop to display different placeholder images
```html
<!-- Error -->
<van-empty image="error" description="Description" />
<!-- Network -->
<van-empty image="network" description="Description" />
<!-- Search -->
<van-empty image="search" description="Description" />
```
### Custom Image
```html
<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
```html
<van-empty description="Description">
<van-button round type="danger" class="bottom-button">
Button
</van-button>
</van-empty>
<style>
.bottom-button {
width: 160px;
}
</style>
```
## API
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| image | Image typecan 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 |