Skip to content

Commit 00ffa9f

Browse files
RJQingHuanRJQingHuan
authored
feat: ✨ img组件添加loading、error插槽 (#323)
1 parent 4984729 commit 00ffa9f

File tree

3 files changed

+113
-22
lines changed

3 files changed

+113
-22
lines changed

‎docs/component/img.md‎

Lines changed: 66 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<frame/>
22

3-
# Img 图片
3+
# Img 图片
44

55
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载完成、加载失败
66

7-
87
## 基本用法
98

109
基础用法与原生 image 标签一致，可以设置 `src` 、 `width` 、`height` 等原生属性。
@@ -30,6 +29,46 @@
3029
const joy = 'data:image/jpeg;base64,...' // 图片文件base64
3130
```
3231

32+
## 插槽
33+
34+
使用`loading` `error`插槽设置在图片加载时、加载失败后的展示内容
35+
36+
```vue
37+
<template>
38+
<wd-img :width="100" :height="100" src="https://www.123.com/a.jpg">
39+
<template #error>
40+
<view class="error-wrap">
41+
加载失败
42+
</view>
43+
</template>
44+
<template #loading>
45+
<view class="loading-wrap">
46+
<wd-loading/>
47+
</view>
48+
</template>
49+
</wd-img>
50+
</template>
51+
52+
<style>
53+
.error-wrap {
54+
width: 100%;
55+
height: 100%;
56+
background-color: red;
57+
color: white;
58+
line-height: 100px;
59+
text-align: center;
60+
}
61+
62+
.loading-wrap {
63+
width: 100%;
64+
height: 100%;
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
68+
}
69+
</style>
70+
```
71+
3372
## 填充模式
3473

3574
通过 `mode` 属性可以设置图片填充模式，可选值见下方表格。
@@ -73,27 +112,34 @@ mode为小程序原生属性，参考[微信小程序image官方文档](https://
73112

74113
## Attributes
75114

76-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
77-
|-----|------|-----|-------|-------|---------|
78-
| src | 图片链接 | string | - | - | - |
79-
| width | 宽度，默认单位为px | number / string | - | - | - |
80-
| height | 高度，默认单位为px | number / string | - | - | - |
81-
| mode | 填充模式 | ImageMode | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
82-
| round | 是否显示为圆形 | boolean | - | false | - |
83-
| radius | 圆角大小，默认单位为px | number / string | - | - | - |
84-
| enable-preview | 是否支持点击预览 | boolean | - | false | 1.2.11 |
115+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
116+
| -------------- | ---------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |
117+
| src | 图片链接 | string | - | - | - |
118+
| width | 宽度，默认单位为px | number / string | - | - | - |
119+
| height | 高度，默认单位为px | number / string | - | - | - |
120+
| mode | 填充模式 | ImageMode | 'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill' | 'scaleToFill' | - |
121+
| round | 是否显示为圆形 | boolean | - | false | - |
122+
| radius | 圆角大小，默认单位为px | number / string | - | - | - |
123+
| enable-preview | 是否支持点击预览 | boolean | - | false | 1.2.11 |
85124

86125
## Events
87126

88-
| 事件名称 | 说明 | 参数 | 最低版本 |
89-
|---------|-----|-----|---------|
90-
| click | 点击事件 | - | - |
91-
| load | 当图片载入完毕时触发 | ` {height, width}` | - |
92-
| error | 当错误发生时触发 | `{errMsg}` | - |
127+
| 事件名称 | 说明 | 参数 | 最低版本 |
128+
| -------- | -------------------- | ----------------- | -------- |
129+
| click | 点击事件 | - | - |
130+
| load | 当图片载入完毕时触发 | `{height, width}` | - |
131+
| error | 当错误发生时触发 | `{errMsg}` | - |
132+
133+
## Slots
134+
135+
| 名称 | 说明 | 最低版本 |
136+
| ------- | ------------------ | ---------------- |
137+
| loading | 图片加载时展示 | $LOWEST_VERSION$ |
138+
| error | 图片加载失败后展示 | $LOWEST_VERSION$ |
93139

94140
## 外部样式类
95141

96-
| 类名 | 说明 | 最低版本 |
97-
|-----|------|--------|
98-
| custom-class | 根节点样式 | - |
99-
| custom-image| image 外部自定义样式 | - |
142+
| 类名 | 说明 | 最低版本 |
143+
| ------------ | -------------------- | -------- |
144+
| custom-class | 根节点样式 | - |
145+
| custom-image | image 外部自定义样式 | - |

‎src/pages/img/Index.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,20 @@
1414
<!-- 以组件位置为定位原点 -->
1515
<wd-img :width="100" :height="100" :src="img" custom-class="border" />
1616
</demo-block>
17+
18+
<demo-block title="插槽用法">
19+
<wd-img :width="100" :height="100" src="https://www.123.com/a.jpg">
20+
<template #error>
21+
<view class="error-wrap">加载失败</view>
22+
</template>
23+
<template #loading>
24+
<view class="loading-wrap">
25+
<wd-loading />
26+
</view>
27+
</template>
28+
</wd-img>
29+
</demo-block>
30+
1731
<demo-block title="填充">
1832
<view class="col" v-for="(mode, index) in modes" :key="index">
1933
<wd-img width="100%" height="27vw" :src="joy" :mode="mode" />
@@ -78,4 +92,21 @@ const modes: ImageMode[] = [
7892
border: 1px solid red;
7993
margin: 0 10px;
8094
}
95+
96+
.error-wrap {
97+
width: 100%;
98+
height: 100%;
99+
background-color: red;
100+
color: white;
101+
line-height: 100px;
102+
text-align: center;
103+
}
104+
105+
.loading-wrap {
106+
width: 100%;
107+
height: 100%;
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
}
81112
</style>

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
<template>
22
<view :class="rootClass" @click="handleClick" :style="rootStyle">
3-
<image :class="`wd-img__image ${customImage}`" :src="src" :mode="mode" :lazy-load="lazyLoad" @load="handleLoad" @error="handleError" />
3+
<image
4+
:class="`wd-img__image ${customImage}`"
5+
:style="status !== 'success' ? 'width: 0;height: 0;' : ''"
6+
:src="src"
7+
:mode="mode"
8+
:lazy-load="lazyLoad"
9+
@load="handleLoad"
10+
@error="handleError"
11+
/>
12+
<slot v-if="status === 'loading'" name="loading"></slot>
13+
<slot v-if="status === 'error'" name="error"></slot>
414
</view>
515
</template>
616
<script lang="ts">
@@ -15,7 +25,7 @@ export default {
1525
</script>
1626

1727
<script lang="ts" setup>
18-
import { computed } from 'vue'
28+
import { computed, ref } from 'vue'
1929
import { addUnit, isDef, objToStyle } from '../common/util'
2030
import { imgProps } from './types'
2131
@@ -41,7 +51,10 @@ const rootClass = computed(() => {
4151
return `wd-img ${props.round ? 'is-round' : ''} ${props.customClass}`
4252
})
4353
54+
const status = ref<'loading' | 'error' | 'success'>('loading')
55+
4456
function handleError(event: Event) {
57+
status.value = 'error'
4558
emit('error', event)
4659
}
4760
function handleClick() {
@@ -53,6 +66,7 @@ function handleClick() {
5366
emit('click')
5467
}
5568
function handleLoad(event: Event) {
69+
status.value = 'success'
5670
emit('load', event)
5771
}
5872
</script>

0 commit comments

Comments
 (0)