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

✅ Closes: #538
Moonofweisheng · Sep 20, 2024 · 9b47a44 · 9b47a44
1 parent a51204b
commit 9b47a44
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/docs/component/status-tip.md b/docs/component/status-tip.md
@@ -54,6 +54,18 @@
 <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
 
 | 参数       | 说明                                               | 类型                          | 可选值                                                          | 默认值                                                        | 最低版本         |
@@ -70,3 +82,9 @@
 | ------ | ------------------------- | ---------------- | ------ | ------ | -------- |
 | height | 图片高度，默认单位为 `px` | string \| number | -      | -      | 1.2.12   |
 | width  | 图片宽度，默认单位为 `px` | string \| number | -      | -      | 1.2.12   |
+
+## Slot
+
+| name    | 说明                     | 最低版本 |
+| ------- | ------------------------ | -------- |
+| image   | 图片内容                  | $LOWEST_VERSION$ |
diff --git a/src/pages/statusTip/Index.vue b/src/pages/statusTip/Index.vue
@@ -42,6 +42,14 @@
     <demo-block title="自定义图片">
       <wd-status-tip image="https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg" tip="查看我的头像" />
     </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>
 </template>
 <script lang="ts" setup></script>

diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue b/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
@@ -1,15 +1,16 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-06-12 10:04:19
- * @LastEditTime: 2024-09-19 14:44:17
- * @LastEditors: weisheng
+ * @LastEditTime: 2024-09-20 10:23:38
+ * @LastEditors: jiaoxueyan
  * @Description: 
  * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
  * 记得注释
 -->
 <template>
   <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>
 </template>