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

docs/component/img.md

@@ -1,10 +1,9 @@
 <frame/>
 
-#  Img 图片
+# Img 图片
 
 增强版的 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` 属性可以设置图片填充模式，可选值见下方表格。
@@ -73,27 +112,34 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
 
 ## Attributes
 
-| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
-|-----|------|-----|-------|-------|---------|
-| src | 图片链接 | string | - | - | - |
-| width | 宽度，默认单位为px | number / string | - | - | - |
-| height | 高度，默认单位为px | number / string | - | - | - |
-| mode | 填充模式 | ImageMode | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
-| round | 是否显示为圆形 | boolean | - | false | - |
-| radius | 圆角大小，默认单位为px | number / string | - | - | - |
-| enable-preview | 是否支持点击预览 | boolean | - | false | 1.2.11 |
+| 参数           | 说明                   | 类型            | 可选值                                                                                                                                                                             | 默认值        | 最低版本 |
+| -------------- | ---------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
+| src            | 图片链接               | string          | -                                                                                                                                                                                  | -             | -        |
+| width          | 宽度，默认单位为px     | number / string | -                                                                                                                                                                                  | -             | -        |
+| height         | 高度，默认单位为px     | number / string | -                                                                                                                                                                                  | -             | -        |
+| mode           | 填充模式               | ImageMode       | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | -        |
+| round          | 是否显示为圆形         | boolean         | -                                                                                                                                                                                  | false         | -        |
+| radius         | 圆角大小，默认单位为px | number / string | -                                                                                                                                                                                  | -             | -        |
+| enable-preview | 是否支持点击预览       | boolean         | -                                                                                                                                                                                  | false         | 1.2.11   |
 
 ## Events
 
-| 事件名称 | 说明 | 参数 | 最低版本 |
-|---------|-----|-----|---------|
-| click | 点击事件 | - | - |
-| load | 当图片载入完毕时触发 | ` {height, width}` | - |
-| error | 当错误发生时触发 | `{errMsg}` | - |
+| 事件名称 | 说明                 | 参数              | 最低版本 |
+| -------- | -------------------- | ----------------- | -------- |
+| click    | 点击事件             | -                 | -        |
+| load     | 当图片载入完毕时触发 | `{height, width}` | -        |
+| error    | 当错误发生时触发     | `{errMsg}`        | -        |
+
+## Slots
+
+| 名称    | 说明               | 最低版本         |
+| ------- | ------------------ | ---------------- |
+| loading | 图片加载时展示     | $LOWEST_VERSION$ |
+| error   | 图片加载失败后展示 | $LOWEST_VERSION$ |
 
 ## 外部样式类
 
-| 类名 | 说明 | 最低版本 |
-|-----|------|--------|
-| custom-class | 根节点样式 | - |
-| custom-image| image 外部自定义样式 | - |
+| 类名         | 说明                 | 最低版本 |
+| ------------ | -------------------- | -------- |
+| custom-class | 根节点样式           | -        |
+| 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>