feat: Empty component

2020-07-06 15:28:43 +08:00
parent 0e4b5a0f2f
commit aab12a4906
12 changed files with 679 additions and 15 deletions
@@ -0,0 +1,81 @@
+# 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;
+    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    |