Skip to content

Commit bd87079

Browse files
buqiyuanbuqiyuan
authored
feat(image): add new features (#5479)
* feat(image): add new features * fix: lint error * update test * update code * update docs * perf: reset currentIndex after close * update code * update code * update code * update code * update code * add rootClassName props * fix lint
1 parent 32a145a commit bd87079

File tree

14 files changed

+413
-100
lines changed

14 files changed

+413
-100
lines changed

‎components/_util/EventInterface.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export type KeyboardEventHandler = (e: KeyboardEvent) => void;
44
export type CompositionEventHandler = (e: CompositionEvent) => void;
55
export type ClipboardEventHandler = (e: ClipboardEvent) => void;
66
export type ChangeEventHandler = (e: ChangeEvent) => void;
7+
export type WheelEventHandler = (e: WheelEvent) => void;
78
export type ChangeEvent = Event & {
89
target: {
910
value?: string | undefined;

‎components/image/PreviewGroup.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,24 @@ import PreviewGroup from '../vc-image/src/PreviewGroup';
22
import { computed, defineComponent } from 'vue';
33
import useConfigInject from '../_util/hooks/useConfigInject';
44

5+
import RotateLeftOutlined from '@ant-design/icons-vue/RotateLeftOutlined';
6+
import RotateRightOutlined from '@ant-design/icons-vue/RotateRightOutlined';
7+
import ZoomInOutlined from '@ant-design/icons-vue/ZoomInOutlined';
8+
import ZoomOutOutlined from '@ant-design/icons-vue/ZoomOutOutlined';
9+
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
10+
import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
11+
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
12+
13+
export const icons = {
14+
rotateLeft: <RotateLeftOutlined />,
15+
rotateRight: <RotateRightOutlined />,
16+
zoomIn: <ZoomInOutlined />,
17+
zoomOut: <ZoomOutOutlined />,
18+
close: <CloseOutlined />,
19+
left: <LeftOutlined />,
20+
right: <RightOutlined />,
21+
};
22+
523
const InternalPreviewGroup = defineComponent({
624
name: 'AImagePreviewGroup',
725
inheritAttrs: false,
@@ -13,6 +31,7 @@ const InternalPreviewGroup = defineComponent({
1331
return (
1432
<PreviewGroup
1533
{...{ ...attrs, ...props }}
34+
icons={icons}
1635
previewPrefixCls={prefixCls.value}
1736
v-slots={slots}
1837
></PreviewGroup>

‎components/image/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
exports[`renders ./components/image/demo/basic.vue correctly 1`] = `
44
<div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
55
<!---->
6-
<!---->
6+
<div class="ant-image-mask">
7+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
8+
</div>
79
</div>
10+
<!---->
811
`;
912
1013
exports[`renders ./components/image/demo/controlled-preview.vue correctly 1`] = `
@@ -13,7 +16,9 @@ exports[`renders ./components/image/demo/controlled-preview.vue correctly 1`] =
1316
</button>
1417
<div class="ant-image" style="width: 200px;"><img class="ant-image-img" style="display: none;" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
1518
<!---->
16-
<!---->
19+
<div class="ant-image-mask">
20+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
21+
</div>
1722
</div>
1823
<!---->
1924
</div>
@@ -22,8 +27,11 @@ exports[`renders ./components/image/demo/controlled-preview.vue correctly 1`] =
2227
exports[`renders ./components/image/demo/fallback.vue correctly 1`] = `
2328
<div class="ant-image" style="width: 200px; height: 200px;"><img class="ant-image-img" src="https://www.antdv.com/#error">
2429
<!---->
25-
<!---->
30+
<div class="ant-image-mask">
31+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
32+
</div>
2633
</div>
34+
<!---->
2735
`;
2836
2937
exports[`renders ./components/image/demo/placeholder.vue correctly 1`] = `
@@ -37,7 +45,9 @@ exports[`renders ./components/image/demo/placeholder.vue correctly 1`] = `
3745
</div>
3846
<!---->
3947
</div>
40-
<!---->
48+
<div class="ant-image-mask">
49+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
50+
</div>
4151
</div>
4252
<!---->
4353
</div>
@@ -52,35 +62,61 @@ exports[`renders ./components/image/demo/placeholder.vue correctly 1`] = `
5262
exports[`renders ./components/image/demo/preview-group.vue correctly 1`] = `
5363
<div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/vue.png">
5464
<!---->
55-
<!---->
65+
<div class="ant-image-mask">
66+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
67+
</div>
5668
</div>
69+
<!---->
5770
<div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/logo.png">
5871
<!---->
59-
<!---->
72+
<div class="ant-image-mask">
73+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
74+
</div>
6075
</div>
76+
<!---->
77+
<!---->
6178
`;
6279
6380
exports[`renders ./components/image/demo/preview-group-visible.vue correctly 1`] = `
6481
<div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp">
6582
<!---->
66-
<!---->
83+
<div class="ant-image-mask">
84+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
85+
</div>
6786
</div>
87+
<!---->
6888
<div style="display: none;">
6989
<div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp">
7090
<!---->
71-
<!---->
91+
<div class="ant-image-mask">
92+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
93+
</div>
7294
</div>
7395
<!---->
7496
<div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp">
7597
<!---->
76-
<!---->
98+
<div class="ant-image-mask">
99+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
100+
</div>
77101
</div>
78102
<!---->
79103
<div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp">
80104
<!---->
81-
<!---->
105+
<div class="ant-image-mask">
106+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
107+
</div>
82108
</div>
83109
<!---->
84110
<!---->
85111
</div>
86112
`;
113+
114+
exports[`renders ./components/image/demo/preview-src.vue correctly 1`] = `
115+
<div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/logo.png">
116+
<!---->
117+
<div class="ant-image-mask">
118+
<div class="ant-image-mask-info"><span role="img" aria-label="eye" class="anticon anticon-eye"><svg focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>Preview</div>
119+
</div>
120+
</div>
121+
<!---->
122+
`;

‎components/image/demo/index.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44
<fallback />
55
<placeholder />
66
<preview-group />
7-
<controlled-preview />
87
<previewGroupVisibleVue />
8+
<previewSrc />
9+
<controlled-preview />
910
</demo-sort>
1011
</template>
1112

1213
<script lang="ts">
1314
import Basic from './basic.vue';
1415
import Fallback from './fallback.vue';
1516
import Placeholder from './placeholder.vue';
17+
import previewSrc from './preview-src.vue';
1618
import PreviewGroup from './preview-group.vue';
1719
import ControlledPreview from './controlled-preview.vue';
1820
import previewGroupVisibleVue from './preview-group-visible.vue';
@@ -26,6 +28,7 @@ export default defineComponent({
2628
components: {
2729
Basic,
2830
Fallback,
31+
previewSrc,
2932
Placeholder,
3033
PreviewGroup,
3134
ControlledPreview,

‎components/image/demo/preview-group-visible.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Preview a collection from one image.
1818

1919
<template>
2020
<a-image
21-
:preview="{ visible }"
21+
:preview="{ visible: false }"
2222
:width="200"
2323
src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
2424
@click="visible = true"

‎components/image/demo/preview-src.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<docs>
2+
---
3+
order: 4
4+
title:
5+
zh-CN: 自定义预览图片
6+
en-US: Custom preview image
7+
---
8+
9+
## zh-CN
10+
11+
可以设置不同的预览图片。
12+
13+
## en-US
14+
15+
You can set different preview image.
16+
17+
</docs>
18+
19+
<template>
20+
<a-image
21+
:width="200"
22+
src="https://aliyuncdn.antdv.com/logo.png"
23+
:preview="{
24+
src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
25+
}"
26+
/>
27+
</template>
28+
<script lang="ts">
29+
import { defineComponent } from 'vue';
30+
export default defineComponent({});
31+
</script>

‎components/image/index.en-US.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ Previewable image.
2222
| placeholder | Load placeholder, use default placeholder when set `true` | boolean \| slot | - | 2.0.0 |
2323
| preview | preview config, disabled when `false` | boolean \| [previewType](#previewType) | true | 2.0.0 |
2424
| src | Image path | string | - | 2.0.0 |
25+
| previewMask | custom mask | slot | - | 3.2.0 |
2526
| width | Image width | string \| number | - | 2.0.0 |
27+
| onError | Load failed callback | (event: Event) => void | - | 3.2.0 |
2628

2729
### previewType
2830

@@ -31,6 +33,9 @@ Previewable image.
3133
visible?: boolean;
3234
onVisibleChange?: (visible, prevVisible) => void;
3335
getContainer?: string | HTMLElement | (() => HTMLElement);
36+
src?: string;
37+
maskClassName?: string;
38+
current?: number;
3439
}
3540
```
3641

‎components/image/index.tsx‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import type { App, ExtractPropTypes, ImgHTMLAttributes, Plugin } from 'vue';
2-
import { defineComponent } from 'vue';
2+
import { defineComponent, computed } from 'vue';
33
import ImageInternal from '../vc-image';
44
import { imageProps } from '../vc-image/src/Image';
5+
import defaultLocale from '../locale/en_US';
56
import useConfigInject from '../_util/hooks/useConfigInject';
6-
import PreviewGroup from './PreviewGroup';
7+
import PreviewGroup, { icons } from './PreviewGroup';
8+
import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
9+
import { getTransitionName } from '../_util/transition';
710

811
export type ImageProps = Partial<
912
ExtractPropTypes<ReturnType<typeof imageProps>> &
@@ -14,12 +17,46 @@ const Image = defineComponent<ImageProps>({
1417
inheritAttrs: false,
1518
props: imageProps() as any,
1619
setup(props, { slots, attrs }) {
17-
const { prefixCls } = useConfigInject('image', props);
20+
const { prefixCls, rootPrefixCls, configProvider } = useConfigInject('image', props);
21+
22+
const mergedPreview = computed(() => {
23+
const { preview } = props;
24+
25+
if (preview === false) {
26+
return preview;
27+
}
28+
const _preview = typeof preview === 'object' ? preview : {};
29+
30+
return {
31+
icons,
32+
..._preview,
33+
transitionName: getTransitionName(rootPrefixCls.value, 'zoom', _preview.transitionName),
34+
maskTransitionName: getTransitionName(
35+
rootPrefixCls.value,
36+
'fade',
37+
_preview.maskTransitionName,
38+
),
39+
};
40+
});
41+
1842
return () => {
43+
const imageLocale = configProvider.locale?.Image || defaultLocale.Image;
44+
1945
return (
2046
<ImageInternal
2147
{...{ ...attrs, ...props, prefixCls: prefixCls.value }}
22-
v-slots={slots}
48+
preview={mergedPreview.value}
49+
v-slots={{
50+
...slots,
51+
previewMask:
52+
slots.previewMask ??
53+
(() => (
54+
<div class={`${prefixCls.value}-mask-info`}>
55+
<EyeOutlined />
56+
{imageLocale?.preview}
57+
</div>
58+
)),
59+
}}
2360
></ImageInternal>
2461
);
2562
};

‎components/image/index.zh-CN.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
2323
| placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean \| slot | - | 2.0.0 |
2424
| preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewType) | true | 2.0.0 |
2525
| src | 图片地址 | string | - | 2.0.0 |
26+
| previewMask | 自定义 mask | slot | - | 3.2.0 |
2627
| width | 图像宽度 | string \| number | - | 2.0.0 |
28+
| onError | 加载错误回调 | (event: Event) => void | - | 3.2.0 |
2729

2830
### previewType
2931

@@ -32,6 +34,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
3234
visible?: boolean;
3335
onVisibleChange?: (visible, prevVisible) => void;
3436
getContainer: string | HTMLElement | (() => HTMLElement);
37+
src?: string;
38+
maskClassName?: string;
39+
current?: number;
3540
}
3641
```
3742

‎components/vc-dialog/Dialog.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ export default defineComponent({
143143
maskAnimation,
144144
zIndex,
145145
wrapClassName,
146+
rootClassName,
146147
wrapStyle,
147148
closable,
148149
maskProps,
@@ -154,7 +155,7 @@ export default defineComponent({
154155
} = props;
155156
const { style, class: className } = attrs;
156157
return (
157-
<div class={`${prefixCls}-root`} {...pickAttrs(props, { data: true })}>
158+
<div class={[`${prefixCls}-root`, rootClassName]} {...pickAttrs(props, { data: true })}>
158159
<Mask
159160
prefixCls={prefixCls}
160161
visible={mask && visible}

0 commit comments

Comments
 (0)