admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ StatusTip缺省提示组件提供图片内容插槽(#538) (#615)

Browse Source 
✅ Closes: #538

Co-authored-by: jiaoxueyan <jiaoxueyan@megarobo.tech>
This commit is contained in:
jiaoxueyan 2024-09-24 13:05:03 +08:00 committed by GitHub
parent 43a5da631d
commit c6b2cf84db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/component/status-tip.md
View File

@ -54,6 +54,18 @@
<wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="查看我的头像" /> <wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="查看我的头像" />
``` ```
## 自定义图片内容
使用插槽 `image` 可以自定义图片内容。
```html
<wd-status-tip tip="自定义图片内容">
<template #image>
<wd-icon name="ie-filled" size="100px"></wd-icon>
</template>
</wd-status-tip>
```
## Attributes ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@ -70,3 +82,9 @@
| ------ | ------------------------- | ---------------- | ------ | ------ | -------- | | ------ | ------------------------- | ---------------- | ------ | ------ | -------- |
| height | 图片高度，默认单位为 `px` | string \| number | - | - | 1.2.12 | | height | 图片高度，默认单位为 `px` | string \| number | - | - | 1.2.12 |
| width | 图片宽度，默认单位为 `px` | string \| number | - | - | 1.2.12 | | width | 图片宽度，默认单位为 `px` | string \| number | - | - | 1.2.12 |
## Slot
| name | 说明 | 最低版本 |
| ------- | ------------------------ | -------- |
| image | 图片内容 | $LOWEST_VERSION$ |

8
src/pages/statusTip/Index.vue
View File

@ -42,6 +42,14 @@
<demo-block title="自定义图片"> <demo-block title="自定义图片">
<wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="查看我的头像" /> <wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="查看我的头像" />
</demo-block> </demo-block>
<demo-block title="插槽自定义图片内容">
<wd-status-tip tip="插槽自定义图片内容">
<template #image>
<wd-icon name="ie-filled" size="100px"></wd-icon>
</template>
</wd-status-tip>
</demo-block>
</page-wraper> </page-wraper>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup></script>

7
src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
View File

@ -1,15 +1,16 @@
<!-- <!--
* @Author: weisheng * @Author: weisheng
* @Date: 2023-06-12 10:04:19 * @Date: 2023-06-12 10:04:19
* @LastEditTime: 2024-09-19 14:44:17 * @LastEditTime: 2024-09-20 10:23:38
* @LastEditors: weisheng * @LastEditors: jiaoxueyan
* @Description: * @Description:
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
* 记得注释 * 记得注释
--> -->
<template> <template>
<view :class="`wd-status-tip ${customClass}`" :style="customStyle"> <view :class="`wd-status-tip ${customClass}`" :style="customStyle">
<wd-img v-if="imgUrl" :mode="imageMode" :src="imgUrl" custom-class="wd-status-tip__image" :custom-style="imgStyle"></wd-img> <slot name="image" v-if="$slots.image"></slot>
<wd-img v-else-if="imgUrl" :mode="imageMode" :src="imgUrl" custom-class="wd-status-tip__image" :custom-style="imgStyle"></wd-img>
<view v-if="tip" class="wd-status-tip__text">{{ tip }}</view> <view v-if="tip" class="wd-status-tip__text">{{ tip }}</view>
</view> </view>
</template> </template>