88 lines
3.2 KiB
Markdown
88 lines
3.2 KiB
Markdown
|
# StatusTip
|
||
|
|
|
||
|
|
Generally used for fallback placeholder display.
|
||
|
|
|
||
|
|
::: warning Note
|
||
|
|
The images used in this component are external links and **_stability is not guaranteed_**. It is recommended to download the images to the developer's server and use them through custom image `URL` or custom `url-prefix`. Custom image address prefix `url-prefix` is supported starting from version 1.3.11.
|
||
|
|
|
||
|
|
Download links:
|
||
|
|
|
||
|
|
1. Github repository: [https://github.com/Moonofweisheng/wot-design-uni-assets](https://github.com/Moonofweisheng/wot-design-uni-assets)
|
||
|
|
2. npm address:
|
||
|
|
|
||
|
|
- npm: [https://www.npmjs.com/package/wot-design-uni-assets](https://www.npmjs.com/package/wot-design-uni-assets)
|
||
|
|
- Taobao mirror: [https://npmmirror.com/package/wot-design-uni-assets](https://npmmirror.com/package/wot-design-uni-assets)
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Basic Usage
|
||
|
|
|
||
|
|
Set `image` to modify the display placeholder image type, default is `network`. Available values are `search`, `network`, `content`, `collect`, `comment`, `halo`, `message`. You can set `tip` to control the display prompt text.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-status-tip image="search" tip="No search results" />
|
||
|
|
<wd-status-tip image="network" tip="This page is currently inaccessible" />
|
||
|
|
<wd-status-tip image="content" tip="No content" />
|
||
|
|
<wd-status-tip image="collect" tip="No collections" />
|
||
|
|
<wd-status-tip image="comment" tip="No contact list currently~" />
|
||
|
|
<wd-status-tip image="halo" tip="Payment failed, please reorder" />
|
||
|
|
<wd-status-tip image="message" tip="Subscribed to all messages" />
|
||
|
|
```
|
||
|
|
|
||
|
|
## Custom Size
|
||
|
|
|
||
|
|
Customize the image size through the `image-size` property.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-status-tip
|
||
|
|
:image-size="{
|
||
|
|
height: 200,
|
||
|
|
width: 300
|
||
|
|
}"
|
||
|
|
image="search"
|
||
|
|
tip="No search results"
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Custom Image
|
||
|
|
|
||
|
|
When you need to customize the image, you can pass any image URL in the `image` property.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-status-tip image="https://wot-ui.cn/assets/panda.jpg" tip="View my avatar" />
|
||
|
|
```
|
||
|
|
|
||
|
|
## Custom Image Content
|
||
|
|
|
||
|
|
Use the `image` slot to customize image content.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-status-tip tip="Custom image content">
|
||
|
|
<template #image>
|
||
|
|
<wd-icon name="ie-filled" size="100px"></wd-icon>
|
||
|
|
</template>
|
||
|
|
</wd-status-tip>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Attributes
|
||
|
|
|
||
|
|
| Parameter | Description | Type | Options | Default | Version |
|
||
|
|
|-----------|-------------|------|----------|---------|----------|
|
||
|
|
| image | Default image type, supports image URL input | string | search / network / content / collect / comment / halo / message | network | - |
|
||
|
|
| image-size | Image size, default unit is `px` | `string`/`number`/`ImageSize` | - | - | - |
|
||
|
|
| tip | Prompt text | string | - | - | - |
|
||
|
|
| image-mode | Mode property for preview image | `ImageMode` | - | aspectFit | 1.2.12 |
|
||
|
|
| url-prefix | Image path prefix, points to the directory where images are located, used for concatenating image URLs | string | - | https://registry.npmmirror.com/wot-design-uni-assets/*/files/ | 1.3.11 |
|
||
|
|
|
||
|
|
### ImageSize
|
||
|
|
|
||
|
|
| Parameter | Description | Type | Options | Default | Version |
|
||
|
|
|-----------|-------------|------|----------|---------|----------|
|
||
|
|
| height | Image height, default unit is `px` | string / number | - | - | 1.2.12 |
|
||
|
|
| width | Image width, default unit is `px` | string / number | - | - | 1.2.12 |
|
||
|
|
|
||
|
|
## Slot
|
||
|
|
|
||
|
|
| Name | Description | Version |
|
||
|
|
|------|-------------|----------|
|
||
|
|
| image | Image content | 1.3.12 |
|