feat: ✨ img组件添加loading、error插槽 (#323)

docs/component/img.md

@@ -4,7 +4,6 @@
 
 增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载完成、加载失败
 
-
 ## 基本用法
 
 基础用法与原生 image 标签一致，可以设置 `src` 、 `width` 、`height` 等原生属性。
@@ -30,6 +29,46 @@
 const joy = 'data:image/jpeg;base64,...'  // 图片文件base64
 ```
 
+## 插槽
+
+使用`loading` `error`插槽设置在图片加载时、加载失败后的展示内容
+
+```vue
+<template>
+  <wd-img :width="100" :height="100" src="https://www.123.com/a.jpg">
+    <template #error>
+      <view class="error-wrap">
+        加载失败
+      </view>
+    </template>
+    <template #loading>
+      <view class="loading-wrap">
+        <wd-loading/>
+      </view>
+    </template>
+  </wd-img>
+</template>
+
+<style>
+.error-wrap {
+  width: 100%;
+  height: 100%;
+  background-color: red;
+  color: white;
+  line-height: 100px;
+  text-align: center;
+}
+
+.loading-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+```
+
 ## 填充模式
 
 通过 `mode` 属性可以设置图片填充模式，可选值见下方表格。
@@ -74,7 +113,7 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
 ## Attributes
 
 | 参数           | 说明                   | 类型            | 可选值                                                                                                                                                                             | 默认值        | 最低版本 |
-|-----|------|-----|-------|-------|---------|
+| -------------- | ---------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
 | src            | 图片链接               | string          | -                                                                                                                                                                                  | -             | -        |
 | width          | 宽度，默认单位为px     | number / string | -                                                                                                                                                                                  | -             | -        |
 | height         | 高度，默认单位为px     | number / string | -                                                                                                                                                                                  | -             | -        |
@@ -86,14 +125,21 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
 ## Events
 
 | 事件名称 | 说明                 | 参数              | 最低版本 |
-|---------|-----|-----|---------|
+| -------- | -------------------- | ----------------- | -------- |
 | click    | 点击事件             | -                 | -        |
-| load | 当图片载入完毕时触发 | ` {height, width}` | - |
+| load     | 当图片载入完毕时触发 | `{height, width}` | -        |
 | error    | 当错误发生时触发     | `{errMsg}`        | -        |
 
+## Slots
+
+| 名称    | 说明               | 最低版本         |
+| ------- | ------------------ | ---------------- |
+| loading | 图片加载时展示     | $LOWEST_VERSION$ |
+| error   | 图片加载失败后展示 | $LOWEST_VERSION$ |
+
 ## 外部样式类
 
 | 类名         | 说明                 | 最低版本 |
-|-----|------|--------|
+| ------------ | -------------------- | -------- |
 | custom-class | 根节点样式           | -        |
-| custom-image| image 外部自定义样式 | - |
+| custom-image | image 外部自定义样式 | -        |

src/pages/img/Index.vue

@@ -14,6 +14,20 @@
       <!-- 以组件位置为定位原点 -->
       <wd-img :width="100" :height="100" :src="img" custom-class="border" />
     </demo-block>
+
+    <demo-block title="插槽用法">
+      <wd-img :width="100" :height="100" src="https://www.123.com/a.jpg">
+        <template #error>
+          <view class="error-wrap">加载失败</view>
+        </template>
+        <template #loading>
+          <view class="loading-wrap">
+            <wd-loading />
+          </view>
+        </template>
+      </wd-img>
+    </demo-block>
+
     <demo-block title="填充">
       <view class="col" v-for="(mode, index) in modes" :key="index">
         <wd-img width="100%" height="27vw" :src="joy" :mode="mode" />
@@ -78,4 +92,21 @@ const modes: ImageMode[] = [
   border: 1px solid red;
   margin: 0 10px;
 }
+
+.error-wrap {
+  width: 100%;
+  height: 100%;
+  background-color: red;
+  color: white;
+  line-height: 100px;
+  text-align: center;
+}
+
+.loading-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

src/uni_modules/wot-design-uni/components/wd-img/wd-img.vue

@@ -1,6 +1,16 @@
 <template>
   <view :class="rootClass" @click="handleClick" :style="rootStyle">
-    <image :class="`wd-img__image ${customImage}`" :src="src" :mode="mode" :lazy-load="lazyLoad" @load="handleLoad" @error="handleError" />
+    <image
+      :class="`wd-img__image ${customImage}`"
+      :style="status !== 'success' ? 'width: 0;height: 0;' : ''"
+      :src="src"
+      :mode="mode"
+      :lazy-load="lazyLoad"
+      @load="handleLoad"
+      @error="handleError"
+    />
+    <slot v-if="status === 'loading'" name="loading"></slot>
+    <slot v-if="status === 'error'" name="error"></slot>
   </view>
 </template>
 <script lang="ts">
@@ -15,7 +25,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { addUnit, isDef, objToStyle } from '../common/util'
 import { imgProps } from './types'
 
@@ -41,7 +51,10 @@ const rootClass = computed(() => {
   return `wd-img  ${props.round ? 'is-round' : ''} ${props.customClass}`
 })
 
+const status = ref<'loading' | 'error' | 'success'>('loading')
+
 function handleError(event: Event) {
+  status.value = 'error'
   emit('error', event)
 }
 function handleClick() {
@@ -53,6 +66,7 @@ function handleClick() {
   emit('click')
 }
 function handleLoad(event: Event) {
+  status.value = 'success'
   emit('load', event)
 }
 </script>