From e5cb8328208abe78ce669ba2ea458e99b91efc86 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Mon, 11 Apr 2022 01:34:12 +0800
Subject: [PATCH 01/13] feat(image): add new features

---
 components/_util/EventInterface.ts            |   1 +
 components/image/PreviewGroup.tsx             |  19 +++
 .../__tests__/__snapshots__/demo.test.js.snap |  56 ++++++--
 components/image/demo/index.vue               |   5 +-
 .../image/demo/preview-group-visible.vue      |   2 +-
 components/image/demo/preview-src.vue         |  31 +++++
 components/image/index.tsx                    |  40 +++++-
 components/image/index.zh-CN.md               |   5 +
 components/vc-dialog/IDialogPropTypes.ts      |   2 +-
 components/vc-image/src/Image.tsx             |  72 ++++++++---
 components/vc-image/src/Preview.tsx           | 102 ++++++++++-----
 components/vc-image/src/PreviewGroup.tsx      | 122 +++++++++++++++---
 12 files changed, 368 insertions(+), 89 deletions(-)
 create mode 100644 components/image/demo/preview-src.vue

diff --git a/components/_util/EventInterface.ts b/components/_util/EventInterface.ts
index c8a4551c2f..b72777cf50 100644
--- a/components/_util/EventInterface.ts
+++ b/components/_util/EventInterface.ts
@@ -4,6 +4,7 @@ export type KeyboardEventHandler = (e: KeyboardEvent) => void;
 export type CompositionEventHandler = (e: CompositionEvent) => void;
 export type ClipboardEventHandler = (e: ClipboardEvent) => void;
 export type ChangeEventHandler = (e: ChangeEvent) => void;
+export type WheelEventHandler = (e: WheelEvent) => void;
 export type ChangeEvent = Event & {
   target: {
     value?: string | undefined;
diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx
index 0666e2399b..47cdc49e64 100644
--- a/components/image/PreviewGroup.tsx
+++ b/components/image/PreviewGroup.tsx
@@ -2,6 +2,24 @@ import PreviewGroup from '../vc-image/src/PreviewGroup';
 import { computed, defineComponent } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
+import RotateLeftOutlined from '@ant-design/icons-vue/RotateLeftOutlined';
+import RotateRightOutlined from '@ant-design/icons-vue/RotateRightOutlined';
+import ZoomInOutlined from '@ant-design/icons-vue/ZoomInOutlined';
+import ZoomOutOutlined from '@ant-design/icons-vue/ZoomOutOutlined';
+import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
+import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
+import RightOutlined from '@ant-design/icons-vue/RightOutlined';
+
+export const icons = {
+  rotateLeft: <RotateLeftOutlined />,
+  rotateRight: <RotateRightOutlined />,
+  zoomIn: <ZoomInOutlined />,
+  zoomOut: <ZoomOutOutlined />,
+  close: <CloseOutlined />,
+  left: <LeftOutlined />,
+  right: <RightOutlined />,
+};
+
 const InternalPreviewGroup = defineComponent({
   name: 'AImagePreviewGroup',
   inheritAttrs: false,
@@ -13,6 +31,7 @@ const InternalPreviewGroup = defineComponent({
       return (
         <PreviewGroup
           {...{ ...attrs, ...props }}
+          icons={icons}
           previewPrefixCls={prefixCls.value}
           v-slots={slots}
         ></PreviewGroup>
diff --git a/components/image/__tests__/__snapshots__/demo.test.js.snap b/components/image/__tests__/__snapshots__/demo.test.js.snap
index a357eefd0b..aff13950da 100644
--- a/components/image/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/image/__tests__/__snapshots__/demo.test.js.snap
@@ -3,8 +3,11 @@
 exports[`renders ./components/image/demo/basic.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
   <!---->
-  <!---->
+  <div class="ant-image-mask">
+    <div class="[object Object]-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>
+  </div>
 </div>
+<!---->
 `;
 
 exports[`renders ./components/image/demo/controlled-preview.vue correctly 1`] = `
@@ -13,7 +16,9 @@ exports[`renders ./components/image/demo/controlled-preview.vue correctly 1`] =
   </button>
   <div class="ant-image" style="width: 200px;"><img class="ant-image-img" style="display: none;" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
     <!---->
-    <!---->
+    <div class="ant-image-mask">
+      <div class="[object Object]-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>
+    </div>
   </div>
   <!---->
 </div>
@@ -22,8 +27,11 @@ exports[`renders ./components/image/demo/controlled-preview.vue correctly 1`] =
 exports[`renders ./components/image/demo/fallback.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px; height: 200px;"><img class="ant-image-img" src="https://www.antdv.com/#error">
   <!---->
-  <!---->
+  <div class="ant-image-mask">
+    <div class="[object Object]-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>
+  </div>
 </div>
+<!---->
 `;
 
 exports[`renders ./components/image/demo/placeholder.vue correctly 1`] = `
@@ -37,7 +45,9 @@ exports[`renders ./components/image/demo/placeholder.vue correctly 1`] = `
         </div>
         <!---->
       </div>
-      <!---->
+      <div class="ant-image-mask">
+        <div class="[object Object]-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>
+      </div>
     </div>
     <!---->
   </div>
@@ -52,35 +62,61 @@ exports[`renders ./components/image/demo/placeholder.vue correctly 1`] = `
 exports[`renders ./components/image/demo/preview-group.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/vue.png">
   <!---->
-  <!---->
+  <div class="ant-image-mask">
+    <div class="[object Object]-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>
+  </div>
 </div>
+<!---->
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/logo.png">
   <!---->
-  <!---->
+  <div class="ant-image-mask">
+    <div class="[object Object]-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>
+  </div>
 </div>
+<!---->
+<!---->
 `;
 
 exports[`renders ./components/image/demo/preview-group-visible.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp">
   <!---->
-  <!---->
+  <div class="ant-image-mask">
+    <div class="[object Object]-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>
+  </div>
 </div>
+<!---->
 <div style="display: none;">
   <div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp">
     <!---->
-    <!---->
+    <div class="ant-image-mask">
+      <div class="[object Object]-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>
+    </div>
   </div>
   <!---->
   <div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp">
     <!---->
-    <!---->
+    <div class="ant-image-mask">
+      <div class="[object Object]-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>
+    </div>
   </div>
   <!---->
   <div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp">
     <!---->
-    <!---->
+    <div class="ant-image-mask">
+      <div class="[object Object]-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>
+    </div>
   </div>
   <!---->
   <!---->
 </div>
 `;
+
+exports[`renders ./components/image/demo/preview-src.vue correctly 1`] = `
+<div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/logo.png">
+  <!---->
+  <div class="ant-image-mask">
+    <div class="[object Object]-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>
+  </div>
+</div>
+<!---->
+`;
diff --git a/components/image/demo/index.vue b/components/image/demo/index.vue
index f7989c94c6..5fc0911b80 100644
--- a/components/image/demo/index.vue
+++ b/components/image/demo/index.vue
@@ -4,8 +4,9 @@
     <fallback />
     <placeholder />
     <preview-group />
-    <controlled-preview />
     <previewGroupVisibleVue />
+    <previewSrc />
+    <controlled-preview />
   </demo-sort>
 </template>
 
@@ -13,6 +14,7 @@
 import Basic from './basic.vue';
 import Fallback from './fallback.vue';
 import Placeholder from './placeholder.vue';
+import previewSrc from './preview-src.vue';
 import PreviewGroup from './preview-group.vue';
 import ControlledPreview from './controlled-preview.vue';
 import previewGroupVisibleVue from './preview-group-visible.vue';
@@ -26,6 +28,7 @@ export default defineComponent({
   components: {
     Basic,
     Fallback,
+    previewSrc,
     Placeholder,
     PreviewGroup,
     ControlledPreview,
diff --git a/components/image/demo/preview-group-visible.vue b/components/image/demo/preview-group-visible.vue
index 75e386293d..1e3a2f2837 100644
--- a/components/image/demo/preview-group-visible.vue
+++ b/components/image/demo/preview-group-visible.vue
@@ -18,7 +18,7 @@ Preview a collection from one image.
 
 <template>
   <a-image
-    :preview="{ visible }"
+    :preview="{ visible: false }"
     :width="200"
     src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
     @click="visible = true"
diff --git a/components/image/demo/preview-src.vue b/components/image/demo/preview-src.vue
new file mode 100644
index 0000000000..0f8f409222
--- /dev/null
+++ b/components/image/demo/preview-src.vue
@@ -0,0 +1,31 @@
+<docs>
+---
+order: 4
+title:
+  zh-CN: 自定义预览图片
+  en-US: Custom preview image
+---
+
+## zh-CN
+
+可以设置不同的预览图片。
+
+## en-US
+
+You can set different preview image.
+
+</docs>
+
+<template>
+  <a-image
+    :width="200"
+    src="https://aliyuncdn.antdv.com/logo.png"
+    :preview="{
+      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    }"
+  />
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({});
+</script>
diff --git a/components/image/index.tsx b/components/image/index.tsx
index 5001a7e728..67e3430e11 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -1,9 +1,12 @@
 import type { App, ExtractPropTypes, ImgHTMLAttributes, Plugin } from 'vue';
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import ImageInternal from '../vc-image';
 import { imageProps } from '../vc-image/src/Image';
+import defaultLocale from '../locale/en_US';
 import useConfigInject from '../_util/hooks/useConfigInject';
-import PreviewGroup from './PreviewGroup';
+import PreviewGroup, { icons } from './PreviewGroup';
+import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
+import { getTransitionName } from '../_util/transition';
 
 export type ImageProps = Partial<
   ExtractPropTypes<ReturnType<typeof imageProps>> &
@@ -14,11 +17,42 @@ const Image = defineComponent<ImageProps>({
   inheritAttrs: false,
   props: imageProps() as any,
   setup(props, { slots, attrs }) {
-    const { prefixCls } = useConfigInject('image', props);
+    const { prefixCls, rootPrefixCls, configProvider } = useConfigInject('image', props);
+
+    const mergedPreview = computed(() => {
+      const { preview } = props;
+      const imageLocale = configProvider.locale?.Image || defaultLocale.Image;
+
+      if (preview === false) {
+        return preview;
+      }
+      const _preview = typeof preview === 'object' ? preview : {};
+
+      return {
+        mask: slots.previewMask ? (
+          slots.previewMask()
+        ) : (
+          <div class={`${prefixCls}-mask-info`}>
+            <EyeOutlined />
+            {imageLocale?.preview}
+          </div>
+        ),
+        icons,
+        ..._preview,
+        transitionName: getTransitionName(rootPrefixCls.value, 'zoom', _preview.transitionName),
+        maskTransitionName: getTransitionName(
+          rootPrefixCls.value,
+          'fade',
+          _preview.maskTransitionName,
+        ),
+      };
+    });
+
     return () => {
       return (
         <ImageInternal
           {...{ ...attrs, ...props, prefixCls: prefixCls.value }}
+          preview={mergedPreview.value}
           v-slots={slots}
         ></ImageInternal>
       );
diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
index d73293594b..a37b787cfd 100644
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@@ -24,6 +24,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
 | preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewType) | true | 2.0.0 |
 | src | 图片地址 | string | - | 2.0.0 |
 | width | 图像宽度 | string \| number | - | 2.0.0 |
+| onError | 加载错误回调 | (event: Event) => void | - |  |
 
 ### previewType
 
@@ -32,6 +33,10 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
   visible?: boolean;
   onVisibleChange?: (visible, prevVisible) => void;
   getContainer: string | HTMLElement | (() => HTMLElement);
+  src?: string;
+  mask?: VNode;
+  maskClassName?: string;
+  current?: number;
 }
 ```
 
diff --git a/components/vc-dialog/IDialogPropTypes.ts b/components/vc-dialog/IDialogPropTypes.ts
index 1c78abf2ef..c6abe677d4 100644
--- a/components/vc-dialog/IDialogPropTypes.ts
+++ b/components/vc-dialog/IDialogPropTypes.ts
@@ -1,7 +1,7 @@
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 
-function dialogPropTypes() {
+export function dialogPropTypes() {
   return {
     keyboard: { type: Boolean, default: undefined },
     mask: { type: Boolean, default: undefined },
diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index 79ee7b9845..c674079497 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -1,21 +1,29 @@
-import type { ImgHTMLAttributes, CSSProperties, PropType } from 'vue';
-import { ref, watch, defineComponent, computed, onMounted } from 'vue';
+import type { ImgHTMLAttributes, CSSProperties, PropType, VNode } from 'vue';
+import { ref, watch, defineComponent, computed, onMounted, onBeforeUnmount } from 'vue';
 import isNumber from 'lodash-es/isNumber';
 import cn from '../../_util/classNames';
 import PropTypes from '../../_util/vue-types';
 import { getOffset } from '../../vc-util/Dom/css';
-
-import type { MouseEventHandler } from './Preview';
 import Preview from './Preview';
 
+import type { MouseEventHandler } from '../../_util/EventInterface';
 import PreviewGroup, { context } from './PreviewGroup';
-
+import type { IDialogChildProps } from '../../vc-dialog/IDialogPropTypes';
 export type GetContainer = string | HTMLElement | (() => HTMLElement);
-export interface ImagePreviewType {
+import type { PreviewProps } from './Preview';
+
+export type ImagePreviewType = Omit<
+  IDialogChildProps,
+  'mask' | 'visible' | 'closable' | 'prefixCls' | 'onClose' | 'afterClose' | 'wrapClassName'
+> & {
+  src?: string;
   visible?: boolean;
   onVisibleChange?: (value: boolean, prevValue: boolean) => void;
   getContainer?: GetContainer | false;
-}
+  mask?: VNode | VNode[];
+  maskClassName?: string;
+  icons?: PreviewProps['icons'];
+};
 
 export interface ImagePropsType extends Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'> {
   // Original
@@ -27,6 +35,8 @@ export interface ImagePropsType extends Omit<ImgHTMLAttributes, 'placeholder' |
   placeholder?: boolean;
   fallback?: string;
   preview?: boolean | ImagePreviewType;
+  onClick?: MouseEventHandler;
+  onError?: HTMLImageElement['onerror'];
 }
 export const imageProps = () => ({
   src: String,
@@ -40,10 +50,17 @@ export const imageProps = () => ({
     type: [Boolean, Object] as PropType<boolean | ImagePreviewType>,
     default: true as boolean | ImagePreviewType,
   },
+  onClick: {
+    type: Function as PropType<MouseEventHandler>,
+  },
+  onError: {
+    type: Function as PropType<HTMLImageElement['onerror']>,
+  },
 });
-type ImageStatus = 'normal' | 'error' | 'loading';
+export type ImageProps = Partial<ReturnType<typeof imageProps>>;
+export type ImageStatus = 'normal' | 'error' | 'loading';
 
-const mergeDefaultValue = <T extends object>(obj: T, defaultValues: object): T => {
+export const mergeDefaultValue = <T extends object>(obj: T, defaultValues: object): T => {
   const res = { ...obj };
   Object.keys(defaultValues).forEach(key => {
     if (obj[key] === undefined) {
@@ -57,11 +74,11 @@ const ImageInternal = defineComponent({
   name: 'Image',
   inheritAttrs: false,
   props: imageProps(),
-  emits: ['click'],
+  emits: ['click', 'error'],
   setup(props, { attrs, slots, emit }) {
     const prefixCls = computed(() => props.prefixCls);
     const previewPrefixCls = computed(() => `${prefixCls.value}-preview`);
-    const preview = computed(() => {
+    const preview = computed<ImagePreviewType>(() => {
       const defaultValues = {
         visible: undefined,
         onVisibleChange: () => {},
@@ -80,8 +97,8 @@ const ImageInternal = defineComponent({
 
     const isControlled = computed(() => previewVisible.value !== undefined);
     const isShowPreview = ref(!!previewVisible.value);
-    watch(previewVisible, () => {
-      isShowPreview.value = !!previewVisible.value;
+    watch(previewVisible, val => {
+      isShowPreview.value = Boolean(val);
     });
     watch(isShowPreview, (val, preVal) => {
       onPreviewVisibleChange.value(val, preVal);
@@ -108,13 +125,15 @@ const ImageInternal = defineComponent({
     const onLoad = () => {
       status.value = 'normal';
     };
-    const onError = () => {
+    const onError = (e: Event) => {
       status.value = 'error';
+      emit('error', e);
     };
 
     const onPreview: MouseEventHandler = e => {
       if (!isControlled.value) {
         const { left, top } = getOffset(e.target);
+
         if (isPreviewGroup.value) {
           setCurrent(currentId.value);
           setGroupMousePosition({
@@ -163,7 +182,7 @@ const ImageInternal = defineComponent({
             return () => {};
           }
 
-          unRegister = registerImage(currentId.value, props.src);
+          unRegister = registerImage(currentId.value, props.src, canPreview.value);
 
           if (!canPreview.value) {
             unRegister();
@@ -172,13 +191,20 @@ const ImageInternal = defineComponent({
         { flush: 'post', immediate: true },
       );
     });
+    onBeforeUnmount(unRegister);
     const toSizePx = (l: number | string) => {
       if (isNumber(l)) return l + 'px';
       return l;
     };
     return () => {
-      const { prefixCls, wrapperClassName, fallback, src, preview, placeholder, wrapperStyle } =
-        props;
+      const {
+        prefixCls,
+        wrapperClassName,
+        fallback,
+        src: imgSrc,
+        placeholder,
+        wrapperStyle,
+      } = props;
       const {
         width,
         height,
@@ -191,11 +217,12 @@ const ImageInternal = defineComponent({
         class: cls,
         style,
       } = attrs as ImgHTMLAttributes;
+      const { icons, mask: previewMask, src: previewSrc, ...dialogProps } = preview.value;
+
       const wrappperClass = cn(prefixCls, wrapperClassName, {
         [`${prefixCls}-error`]: isError.value,
       });
-      const mergedSrc = isError.value && fallback ? fallback : src;
-      const previewMask = slots.previewMask && slots.previewMask();
+      const mergedSrc = isError.value && fallback ? fallback : previewSrc ?? imgSrc;
       const imgCommonProps = {
         crossorigin,
         decoding,
@@ -215,12 +242,13 @@ const ImageInternal = defineComponent({
           ...(style as CSSProperties),
         },
       };
+
       return (
         <>
           <div
             class={wrappperClass}
             onClick={
-              preview && !isError.value
+              props.preview && !Object.is(previewVisible.value, false) && !isError.value
                 ? onPreview
                 : e => {
                     emit('click', e);
@@ -238,7 +266,7 @@ const ImageInternal = defineComponent({
                 ? {
                     src: fallback,
                   }
-                : { onLoad, onError, src })}
+                : { onLoad, onError, src: imgSrc })}
               ref={img}
             />
 
@@ -254,6 +282,7 @@ const ImageInternal = defineComponent({
           </div>
           {!isPreviewGroup.value && canPreview.value && (
             <Preview
+              {...dialogProps}
               aria-hidden={!isShowPreview.value}
               visible={isShowPreview.value}
               prefixCls={previewPrefixCls.value}
@@ -262,6 +291,7 @@ const ImageInternal = defineComponent({
               src={mergedSrc}
               alt={alt}
               getContainer={getPreviewContainer.value}
+              icons={icons}
             />
           )}
         </>
diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index 55e9f4b1d0..b2d8c72634 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -1,47 +1,68 @@
-import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import RotateLeftOutlined from '@ant-design/icons-vue/RotateLeftOutlined';
-import RotateRightOutlined from '@ant-design/icons-vue/RotateRightOutlined';
-import ZoomInOutlined from '@ant-design/icons-vue/ZoomInOutlined';
-import ZoomOutOutlined from '@ant-design/icons-vue/ZoomOutOutlined';
-import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
-import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
-import RightOutlined from '@ant-design/icons-vue/RightOutlined';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch,
+  createVNode,
+} from 'vue';
+import type { VNode, PropType } from 'vue';
 
 import classnames from '../../_util/classNames';
 import Dialog from '../../vc-dialog';
-import getIDialogPropTypes from '../../vc-dialog/IDialogPropTypes';
+import { type IDialogChildProps, dialogPropTypes } from '../../vc-dialog/IDialogPropTypes';
 import { getOffset } from '../../vc-util/Dom/css';
 import addEventListener from '../../vc-util/Dom/addEventListener';
 import { warning } from '../../vc-util/warning';
 import useFrameSetState from './hooks/useFrameSetState';
 import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
+import type { MouseEventHandler, WheelEventHandler } from '../../_util/EventInterface';
 
 import { context } from './PreviewGroup';
 
-const IDialogPropTypes = getIDialogPropTypes();
-export type MouseEventHandler = (payload: MouseEvent) => void;
-
-export interface PreviewProps extends Omit<typeof IDialogPropTypes, 'onClose'> {
+export interface PreviewProps extends Omit<IDialogChildProps, 'onClose' | 'mask'> {
   onClose?: (e: Element) => void;
   src?: string;
   alt?: string;
+  mask?: VNode;
+  rootClassName?: string;
+  icons?: {
+    rotateLeft?: VNode;
+    rotateRight?: VNode;
+    zoomIn?: VNode;
+    zoomOut?: VNode;
+    close?: VNode;
+    left?: VNode;
+    right?: VNode;
+  };
 }
 
 const initialPosition = {
   x: 0,
   y: 0,
 };
-const PreviewType = {
+export const previewProps = {
+  ...dialogPropTypes(),
   src: String,
   alt: String,
-  ...IDialogPropTypes,
+  icons: {
+    type: Object as PropType<PreviewProps['icons']>,
+    default: () => ({} as PreviewProps['icons']),
+  },
+  mask: {
+    type: Object as PropType<PreviewProps['mask']>,
+  },
 };
 const Preview = defineComponent({
   name: 'Preview',
   inheritAttrs: false,
-  props: PreviewType,
+  props: previewProps,
   emits: ['close', 'afterClose'],
   setup(props, { emit, attrs }) {
+    const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right } = props.icons;
+
     const scale = ref(1);
     const rotate = ref(0);
     const [position, setPosition] = useFrameSetState<{
@@ -65,17 +86,16 @@ const Preview = defineComponent({
     const isMoving = ref(false);
     const groupContext = context.inject();
     const { previewUrls, current, isPreviewGroup, setCurrent } = groupContext;
-    const previewGroupCount = computed(() => Object.keys(previewUrls).length);
-    const previewUrlsKeys = computed(() => Object.keys(previewUrls));
-    const currentPreviewIndex = computed(() =>
-      previewUrlsKeys.value.indexOf(String(current.value)),
-    );
-    const combinationSrc = computed(() =>
-      isPreviewGroup.value ? previewUrls[current.value] : props.src,
-    );
+    const previewGroupCount = computed(() => previewUrls.value.size);
+    const previewUrlsKeys = computed(() => Array.from(previewUrls.value.keys()));
+    const currentPreviewIndex = computed(() => previewUrlsKeys.value.indexOf(current.value));
+    const combinationSrc = computed(() => {
+      return isPreviewGroup.value ? previewUrls.value.get(current.value) : props.src;
+    });
     const showLeftOrRightSwitches = computed(
       () => isPreviewGroup.value && previewGroupCount.value > 1,
     );
+    const lastWheelZoomDirection = ref({ wheelDirection: 0 });
 
     const onAfterClose = () => {
       scale.value = 1;
@@ -106,7 +126,7 @@ const Preview = defineComponent({
       // Without this mask close will abnormal
       event.stopPropagation();
       if (currentPreviewIndex.value > 0) {
-        setCurrent(previewUrlsKeys.value[String(currentPreviewIndex.value - 1)]);
+        setCurrent(previewUrlsKeys.value[currentPreviewIndex.value - 1]);
       }
     };
 
@@ -115,7 +135,7 @@ const Preview = defineComponent({
       // Without this mask close will abnormal
       event.stopPropagation();
       if (currentPreviewIndex.value < previewGroupCount.value - 1) {
-        setCurrent(previewUrlsKeys.value[String(currentPreviewIndex.value + 1)]);
+        setCurrent(previewUrlsKeys.value[currentPreviewIndex.value + 1]);
       }
     };
 
@@ -126,28 +146,28 @@ const Preview = defineComponent({
     const iconClassName = `${props.prefixCls}-operations-icon`;
     const tools = [
       {
-        icon: CloseOutlined,
+        icon: close,
         onClick: onClose,
         type: 'close',
       },
       {
-        icon: ZoomInOutlined,
+        icon: zoomIn,
         onClick: onZoomIn,
         type: 'zoomIn',
       },
       {
-        icon: ZoomOutOutlined,
+        icon: zoomOut,
         onClick: onZoomOut,
         type: 'zoomOut',
         disabled: computed(() => scale.value === 1),
       },
       {
-        icon: RotateRightOutlined,
+        icon: rotateRight,
         onClick: onRotateRight,
         type: 'rotateRight',
       },
       {
-        icon: RotateLeftOutlined,
+        icon: rotateLeft,
         onClick: onRotateLeft,
         type: 'rotateLeft',
       },
@@ -175,6 +195,8 @@ const Preview = defineComponent({
     };
 
     const onMouseDown: MouseEventHandler = event => {
+      // Only allow main button
+      if (event.button !== 0) return;
       event.preventDefault();
       // Without this mask close will abnormal
       event.stopPropagation();
@@ -193,6 +215,14 @@ const Preview = defineComponent({
         });
       }
     };
+
+    const onWheelMove: WheelEventHandler = event => {
+      if (!props.visible) return;
+      event.preventDefault();
+      const wheelDirection = event.deltaY;
+      lastWheelZoomDirection.value = { wheelDirection };
+    };
+
     let removeListeners = () => {};
     onMounted(() => {
       watch(
@@ -204,6 +234,9 @@ const Preview = defineComponent({
 
           const onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false);
           const onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false);
+          const onScrollWheelListener = addEventListener(window, 'wheel', onWheelMove, {
+            passive: false,
+          });
 
           try {
             // Resolve if in iframe lost event
@@ -225,6 +258,7 @@ const Preview = defineComponent({
           removeListeners = () => {
             onMouseUpListener.remove();
             onMouseMoveListener.remove();
+            onScrollWheelListener.remove();
 
             /* istanbul ignore next */
             if (onTopMouseUpListener) onTopMouseUpListener.remove();
@@ -263,7 +297,7 @@ const Preview = defineComponent({
                 onClick={onClick}
                 key={type}
               >
-                <IconType class={iconClassName} />
+                {createVNode(IconType, { class: iconClassName })}
               </li>
             ))}
           </ul>
@@ -291,7 +325,7 @@ const Preview = defineComponent({
               })}
               onClick={onSwitchLeft}
             >
-              <LeftOutlined />
+              {left}
             </div>
           )}
           {showLeftOrRightSwitches.value && (
@@ -302,7 +336,7 @@ const Preview = defineComponent({
               })}
               onClick={onSwitchRight}
             >
-              <RightOutlined />
+              {right}
             </div>
           )}
         </Dialog>
diff --git a/components/vc-image/src/PreviewGroup.tsx b/components/vc-image/src/PreviewGroup.tsx
index 0b65c6cd7b..466e613633 100644
--- a/components/vc-image/src/PreviewGroup.tsx
+++ b/components/vc-image/src/PreviewGroup.tsx
@@ -1,19 +1,39 @@
-import type { Ref } from 'vue';
-import { ref, provide, defineComponent, inject, reactive } from 'vue';
+import { PropType, Ref, ComputedRef } from 'vue';
+import { ref, provide, defineComponent, inject, watch, reactive, computed, watchEffect } from 'vue';
+import { ImagePreviewType, mergeDefaultValue } from './Image';
 import Preview from './Preview';
+import type { PreviewProps } from './Preview';
+
+export interface PreviewGroupPreview
+  extends Omit<ImagePreviewType, 'icons' | 'mask' | 'maskClassName'> {
+  /**
+   * If Preview the show img index
+   * @default 0
+   */
+  current?: number;
+}
 
 export interface GroupConsumerProps {
   previewPrefixCls?: string;
+  icons?: PreviewProps['icons'];
+  preview?: boolean | PreviewGroupPreview;
 }
+
+interface PreviewUrl {
+  url: string;
+  canPreview: boolean;
+}
+
 export interface GroupConsumerValue extends GroupConsumerProps {
   isPreviewGroup?: Ref<boolean | undefined>;
-  previewUrls: Record<number, string>;
-  setPreviewUrls: (previewUrls: Record<number, string>) => void;
+  previewUrls: ComputedRef<Map<number, string>>;
+  setPreviewUrls: (id: number, url: string, canPreview?: boolean) => void;
   current: Ref<number>;
   setCurrent: (current: number) => void;
   setShowPreview: (isShowPreview: boolean) => void;
   setMousePosition: (mousePosition: null | { x: number; y: number }) => void;
-  registerImage: (id: number, url: string) => () => void;
+  registerImage: (id: number, url: string, canPreview?: boolean) => () => void;
+  rootClassName?: string;
 }
 const previewGroupContext = Symbol('previewGroupContext');
 export const context = {
@@ -23,7 +43,7 @@ export const context = {
   inject: () => {
     return inject<GroupConsumerValue>(previewGroupContext, {
       isPreviewGroup: ref(false),
-      previewUrls: reactive({}),
+      previewUrls: computed(() => new Map()),
       setPreviewUrls: () => {},
       current: ref(null),
       setCurrent: () => {},
@@ -37,14 +57,56 @@ export const context = {
 const Group = defineComponent({
   name: 'PreviewGroup',
   inheritAttrs: false,
-  props: { previewPrefixCls: String },
+  props: {
+    previewPrefixCls: String,
+    preview: {
+      type: [Boolean, Object] as PropType<boolean | ImagePreviewType>,
+      default: true as boolean | ImagePreviewType,
+    },
+    icons: {
+      type: Object as PropType<PreviewProps['icons']>,
+      default: () => ({}),
+    },
+  },
   setup(props, { slots }) {
-    const previewUrls = reactive<Record<number, string>>({});
-    const current = ref<number>();
-    const isShowPreview = ref<boolean>(false);
+    const preview = computed<PreviewGroupPreview>(() => {
+      const defaultValues = {
+        visible: undefined,
+        onVisibleChange: () => {},
+        getContainer: undefined,
+        current: 0,
+      };
+      return typeof props.preview === 'object'
+        ? mergeDefaultValue(props.preview, defaultValues)
+        : defaultValues;
+    });
+    const previewUrls = reactive<Map<number, PreviewUrl>>(new Map());
+    const current = ref(preview.value.current);
+
+    const previewVisible = computed(() => preview.value.visible);
+    const onPreviewVisibleChange = computed(() => preview.value.onVisibleChange);
+    const getPreviewContainer = computed(() => preview.value.getContainer);
+
+    const isShowPreview = ref(!!previewVisible.value);
+
     const mousePosition = ref<{ x: number; y: number }>(null);
-    const setPreviewUrls = (val: Record<number, string>) => {
-      Object.assign(previewUrls, val);
+    const isControlled = computed(() => previewVisible.value !== undefined);
+    const previewUrlsKeys = computed(() => Array.from(previewUrls.keys()));
+    const currentControlledKey = computed(() => previewUrlsKeys.value[preview.value.current]);
+    const canPreviewUrls = computed(
+      () =>
+        new Map<number, string>(
+          Array.from(previewUrls)
+            .filter(([, { canPreview }]) => !!canPreview)
+            .map(([id, { url }]) => [id, url]),
+        ),
+    );
+
+    const setPreviewUrls = (id: number, url: string, canPreview: boolean = true) => {
+      previewUrls.set(id, {
+        url,
+        canPreview,
+      });
     };
     const setCurrent = (val: number) => {
       current.value = val;
@@ -55,21 +117,40 @@ const Group = defineComponent({
     const setShowPreview = (val: boolean) => {
       isShowPreview.value = val;
     };
-    const registerImage = (id: number, url: string) => {
-      previewUrls[id] = url;
 
-      return () => {
-        delete previewUrls[id];
+    const registerImage = (id: number, url: string, canPreview: boolean = true) => {
+      const unRegister = () => {
+        previewUrls.delete(id);
       };
+      previewUrls.set(id, {
+        url,
+        canPreview,
+      });
+      return unRegister;
     };
+
     const onPreviewClose = (e: any) => {
       e?.stopPropagation();
       isShowPreview.value = false;
       mousePosition.value = null;
     };
+
+    watch(previewVisible, () => {
+      isShowPreview.value = !!previewVisible.value;
+    });
+    watch(isShowPreview, (val, preVal) => {
+      onPreviewVisibleChange.value(val, preVal);
+    });
+
+    watchEffect(() => {
+      if (!isShowPreview.value && isControlled.value) {
+        setCurrent(currentControlledKey.value);
+      }
+    });
+
     context.provide({
       isPreviewGroup: ref(true),
-      previewUrls,
+      previewUrls: canPreviewUrls,
       setPreviewUrls,
       current,
       setCurrent,
@@ -77,17 +158,22 @@ const Group = defineComponent({
       setMousePosition,
       registerImage,
     });
+
     return () => {
+      const { ...dialogProps } = preview.value;
       return (
         <>
           {slots.default && slots.default()}
           <Preview
+            {...dialogProps}
             ria-hidden={!isShowPreview.value}
             visible={isShowPreview.value}
             prefixCls={props.previewPrefixCls}
             onClose={onPreviewClose}
             mousePosition={mousePosition.value}
-            src={previewUrls[current.value]}
+            src={canPreviewUrls.value.get(current.value)}
+            icons={props.icons}
+            getContainer={getPreviewContainer.value}
           />
         </>
       );

From 94be9f0f8232705494bb4a696b1eac2e8320f4f3 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Mon, 11 Apr 2022 02:03:15 +0800
Subject: [PATCH 02/13] fix: lint error

---
 components/vc-image/src/Preview.tsx      | 2 +-
 components/vc-image/src/PreviewGroup.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index b2d8c72634..0c1844df96 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -61,7 +61,7 @@ const Preview = defineComponent({
   props: previewProps,
   emits: ['close', 'afterClose'],
   setup(props, { emit, attrs }) {
-    const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right } = props.icons;
+    const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right } = reactive(props.icons);
 
     const scale = ref(1);
     const rotate = ref(0);
diff --git a/components/vc-image/src/PreviewGroup.tsx b/components/vc-image/src/PreviewGroup.tsx
index 466e613633..a88dfc5e9d 100644
--- a/components/vc-image/src/PreviewGroup.tsx
+++ b/components/vc-image/src/PreviewGroup.tsx
@@ -1,6 +1,6 @@
-import { PropType, Ref, ComputedRef } from 'vue';
+import type { PropType, Ref, ComputedRef } from 'vue';
 import { ref, provide, defineComponent, inject, watch, reactive, computed, watchEffect } from 'vue';
-import { ImagePreviewType, mergeDefaultValue } from './Image';
+import { type ImagePreviewType, mergeDefaultValue } from './Image';
 import Preview from './Preview';
 import type { PreviewProps } from './Preview';
 
@@ -102,7 +102,7 @@ const Group = defineComponent({
         ),
     );
 
-    const setPreviewUrls = (id: number, url: string, canPreview: boolean = true) => {
+    const setPreviewUrls = (id: number, url: string, canPreview = true) => {
       previewUrls.set(id, {
         url,
         canPreview,
@@ -118,7 +118,7 @@ const Group = defineComponent({
       isShowPreview.value = val;
     };
 
-    const registerImage = (id: number, url: string, canPreview: boolean = true) => {
+    const registerImage = (id: number, url: string, canPreview = true) => {
       const unRegister = () => {
         previewUrls.delete(id);
       };

From f38cfe643996bb81fa045a1631bfe12995a81719 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Mon, 11 Apr 2022 10:48:54 +0800
Subject: [PATCH 03/13] update test

---
 .../__tests__/__snapshots__/demo.test.js.snap | 22 +++++++++----------
 components/image/index.tsx                    |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/image/__tests__/__snapshots__/demo.test.js.snap b/components/image/__tests__/__snapshots__/demo.test.js.snap
index aff13950da..9ec6faf07a 100644
--- a/components/image/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/image/__tests__/__snapshots__/demo.test.js.snap
@@ -4,7 +4,7 @@ exports[`renders ./components/image/demo/basic.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
   <!---->
   <div class="ant-image-mask">
-    <div class="[object Object]-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>
+    <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>
   </div>
 </div>
 <!---->
@@ -17,7 +17,7 @@ exports[`renders ./components/image/demo/controlled-preview.vue correctly 1`] =
   <div class="ant-image" style="width: 200px;"><img class="ant-image-img" style="display: none;" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png">
     <!---->
     <div class="ant-image-mask">
-      <div class="[object Object]-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>
+      <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>
     </div>
   </div>
   <!---->
@@ -28,7 +28,7 @@ exports[`renders ./components/image/demo/fallback.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px; height: 200px;"><img class="ant-image-img" src="https://www.antdv.com/#error">
   <!---->
   <div class="ant-image-mask">
-    <div class="[object Object]-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>
+    <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>
   </div>
 </div>
 <!---->
@@ -46,7 +46,7 @@ exports[`renders ./components/image/demo/placeholder.vue correctly 1`] = `
         <!---->
       </div>
       <div class="ant-image-mask">
-        <div class="[object Object]-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>
+        <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>
       </div>
     </div>
     <!---->
@@ -63,14 +63,14 @@ exports[`renders ./components/image/demo/preview-group.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/vue.png">
   <!---->
   <div class="ant-image-mask">
-    <div class="[object Object]-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>
+    <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>
   </div>
 </div>
 <!---->
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/logo.png">
   <!---->
   <div class="ant-image-mask">
-    <div class="[object Object]-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>
+    <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>
   </div>
 </div>
 <!---->
@@ -81,7 +81,7 @@ exports[`renders ./components/image/demo/preview-group-visible.vue correctly 1`]
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp">
   <!---->
   <div class="ant-image-mask">
-    <div class="[object Object]-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>
+    <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>
   </div>
 </div>
 <!---->
@@ -89,21 +89,21 @@ exports[`renders ./components/image/demo/preview-group-visible.vue correctly 1`]
   <div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp">
     <!---->
     <div class="ant-image-mask">
-      <div class="[object Object]-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>
+      <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>
     </div>
   </div>
   <!---->
   <div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp">
     <!---->
     <div class="ant-image-mask">
-      <div class="[object Object]-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>
+      <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>
     </div>
   </div>
   <!---->
   <div class="ant-image"><img class="ant-image-img" src="https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp">
     <!---->
     <div class="ant-image-mask">
-      <div class="[object Object]-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>
+      <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>
     </div>
   </div>
   <!---->
@@ -115,7 +115,7 @@ exports[`renders ./components/image/demo/preview-src.vue correctly 1`] = `
 <div class="ant-image" style="width: 200px;"><img class="ant-image-img" src="https://aliyuncdn.antdv.com/logo.png">
   <!---->
   <div class="ant-image-mask">
-    <div class="[object Object]-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>
+    <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>
   </div>
 </div>
 <!---->
diff --git a/components/image/index.tsx b/components/image/index.tsx
index 67e3430e11..cc1fe92625 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -32,7 +32,7 @@ const Image = defineComponent<ImageProps>({
         mask: slots.previewMask ? (
           slots.previewMask()
         ) : (
-          <div class={`${prefixCls}-mask-info`}>
+          <div class={`${prefixCls.value}-mask-info`}>
             <EyeOutlined />
             {imageLocale?.preview}
           </div>

From ce4c6058c8fffb47bb732061ea80e784dd27fe2a Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Mon, 11 Apr 2022 15:16:19 +0800
Subject: [PATCH 04/13] update code

---
 components/image/index.tsx          | 23 +++++++++++++----------
 components/vc-image/src/Image.tsx   | 15 +++++++--------
 components/vc-image/src/Preview.tsx |  4 ----
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/components/image/index.tsx b/components/image/index.tsx
index cc1fe92625..6892742d82 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -21,7 +21,6 @@ const Image = defineComponent<ImageProps>({
 
     const mergedPreview = computed(() => {
       const { preview } = props;
-      const imageLocale = configProvider.locale?.Image || defaultLocale.Image;
 
       if (preview === false) {
         return preview;
@@ -29,14 +28,6 @@ const Image = defineComponent<ImageProps>({
       const _preview = typeof preview === 'object' ? preview : {};
 
       return {
-        mask: slots.previewMask ? (
-          slots.previewMask()
-        ) : (
-          <div class={`${prefixCls.value}-mask-info`}>
-            <EyeOutlined />
-            {imageLocale?.preview}
-          </div>
-        ),
         icons,
         ..._preview,
         transitionName: getTransitionName(rootPrefixCls.value, 'zoom', _preview.transitionName),
@@ -49,11 +40,23 @@ const Image = defineComponent<ImageProps>({
     });
 
     return () => {
+      const imageLocale = configProvider.locale?.Image || defaultLocale.Image;
+
       return (
         <ImageInternal
           {...{ ...attrs, ...props, prefixCls: prefixCls.value }}
           preview={mergedPreview.value}
-          v-slots={slots}
+          v-slots={{
+            ...slots,
+            previewMask:
+              slots.previewMask ??
+              (() => (
+                <div class={`${prefixCls.value}-mask-info`}>
+                  <EyeOutlined />
+                  {imageLocale?.preview}
+                </div>
+              )),
+          }}
         ></ImageInternal>
       );
     };
diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index c674079497..93a3078b2c 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -1,5 +1,5 @@
-import type { ImgHTMLAttributes, CSSProperties, PropType, VNode } from 'vue';
-import { ref, watch, defineComponent, computed, onMounted, onBeforeUnmount } from 'vue';
+import type { ImgHTMLAttributes, CSSProperties, PropType } from 'vue';
+import { ref, watch, defineComponent, computed, onMounted, onUnmounted } from 'vue';
 import isNumber from 'lodash-es/isNumber';
 import cn from '../../_util/classNames';
 import PropTypes from '../../_util/vue-types';
@@ -20,7 +20,6 @@ export type ImagePreviewType = Omit<
   visible?: boolean;
   onVisibleChange?: (value: boolean, prevValue: boolean) => void;
   getContainer?: GetContainer | false;
-  mask?: VNode | VNode[];
   maskClassName?: string;
   icons?: PreviewProps['icons'];
 };
@@ -191,7 +190,7 @@ const ImageInternal = defineComponent({
         { flush: 'post', immediate: true },
       );
     });
-    onBeforeUnmount(unRegister);
+    onUnmounted(unRegister);
     const toSizePx = (l: number | string) => {
       if (isNumber(l)) return l + 'px';
       return l;
@@ -217,7 +216,7 @@ const ImageInternal = defineComponent({
         class: cls,
         style,
       } = attrs as ImgHTMLAttributes;
-      const { icons, mask: previewMask, src: previewSrc, ...dialogProps } = preview.value;
+      const { icons, src: previewSrc, ...dialogProps } = preview.value;
 
       const wrappperClass = cn(prefixCls, wrapperClassName, {
         [`${prefixCls}-error`]: isError.value,
@@ -248,7 +247,7 @@ const ImageInternal = defineComponent({
           <div
             class={wrappperClass}
             onClick={
-              props.preview && !Object.is(previewVisible.value, false) && !isError.value
+              canPreview.value && !Object.is(previewVisible.value, false)
                 ? onPreview
                 : e => {
                     emit('click', e);
@@ -276,8 +275,8 @@ const ImageInternal = defineComponent({
               </div>
             )}
             {/* Preview Click Mask */}
-            {previewMask && canPreview.value && (
-              <div class={`${prefixCls}-mask`}>{previewMask}</div>
+            {slots.previewMask && canPreview.value && (
+              <div class={`${prefixCls}-mask`}>{slots.previewMask()}</div>
             )}
           </div>
           {!isPreviewGroup.value && canPreview.value && (
diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index 0c1844df96..aea713d8ae 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -26,7 +26,6 @@ export interface PreviewProps extends Omit<IDialogChildProps, 'onClose' | 'mask'
   onClose?: (e: Element) => void;
   src?: string;
   alt?: string;
-  mask?: VNode;
   rootClassName?: string;
   icons?: {
     rotateLeft?: VNode;
@@ -51,9 +50,6 @@ export const previewProps = {
     type: Object as PropType<PreviewProps['icons']>,
     default: () => ({} as PreviewProps['icons']),
   },
-  mask: {
-    type: Object as PropType<PreviewProps['mask']>,
-  },
 };
 const Preview = defineComponent({
   name: 'Preview',

From 37fa61bf2f628e0f87796d4cec2ae83ea1120491 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Mon, 11 Apr 2022 15:55:55 +0800
Subject: [PATCH 05/13] update docs

---
 components/image/index.en-US.md | 5 +++++
 components/image/index.zh-CN.md | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md
index 09841629e6..1365f5e55a 100644
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@@ -22,7 +22,9 @@ Previewable image.
 | placeholder | Load placeholder, use default placeholder when set `true` | boolean \| slot | - | 2.0.0 |
 | preview | preview config, disabled when `false` | boolean \| [previewType](#previewType) | true | 2.0.0 |
 | src | Image path | string | - | 2.0.0 |
+| previewMask | custom mask | slot | - | 3.2.0 |
 | width | Image width | string \| number | - | 2.0.0 |
+| onError | Load failed callback | (event: Event) => void | - | 3.2.0 |
 
 ### previewType
 
@@ -31,6 +33,9 @@ Previewable image.
   visible?: boolean;
   onVisibleChange?: (visible, prevVisible) => void;
   getContainer?: string | HTMLElement | (() => HTMLElement);
+  src?: string;
+  maskClassName?: string;
+  current?: number;
 }
 ```
 
diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
index a37b787cfd..dcc8f15bb5 100644
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@@ -23,8 +23,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
 | placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean \| slot | - | 2.0.0 |
 | preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewType) | true | 2.0.0 |
 | src | 图片地址 | string | - | 2.0.0 |
+| previewMask | 自定义 mask | slot | - | 3.2.0 |
 | width | 图像宽度 | string \| number | - | 2.0.0 |
-| onError | 加载错误回调 | (event: Event) => void | - |  |
+| onError | 加载错误回调 | (event: Event) => void | - | 3.2.0 |
 
 ### previewType
 
@@ -34,7 +35,6 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
   onVisibleChange?: (visible, prevVisible) => void;
   getContainer: string | HTMLElement | (() => HTMLElement);
   src?: string;
-  mask?: VNode;
   maskClassName?: string;
   current?: number;
 }

From c8b9f942b963ab5632bc0cc9203d1b10b449196b Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Mon, 11 Apr 2022 16:20:40 +0800
Subject: [PATCH 06/13] perf: reset currentIndex after close

---
 components/vc-image/src/Preview.tsx      |  1 +
 components/vc-image/src/PreviewGroup.tsx | 16 ++++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index aea713d8ae..a85a622e0d 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -97,6 +97,7 @@ const Preview = defineComponent({
       scale.value = 1;
       rotate.value = 0;
       setPosition(initialPosition);
+      emit('afterClose');
     };
 
     const onZoomIn = () => {
diff --git a/components/vc-image/src/PreviewGroup.tsx b/components/vc-image/src/PreviewGroup.tsx
index a88dfc5e9d..54caca1484 100644
--- a/components/vc-image/src/PreviewGroup.tsx
+++ b/components/vc-image/src/PreviewGroup.tsx
@@ -1,5 +1,5 @@
 import type { PropType, Ref, ComputedRef } from 'vue';
-import { ref, provide, defineComponent, inject, watch, reactive, computed, watchEffect } from 'vue';
+import { ref, provide, defineComponent, inject, watch, reactive, computed } from 'vue';
 import { type ImagePreviewType, mergeDefaultValue } from './Image';
 import Preview from './Preview';
 import type { PreviewProps } from './Preview';
@@ -135,17 +135,20 @@ const Group = defineComponent({
       mousePosition.value = null;
     };
 
+    const onPreviewAfterClose = () => {
+      if (!isShowPreview.value && isControlled.value) {
+        setCurrent(currentControlledKey.value);
+      }
+    };
+
     watch(previewVisible, () => {
       isShowPreview.value = !!previewVisible.value;
     });
     watch(isShowPreview, (val, preVal) => {
       onPreviewVisibleChange.value(val, preVal);
     });
-
-    watchEffect(() => {
-      if (!isShowPreview.value && isControlled.value) {
-        setCurrent(currentControlledKey.value);
-      }
+    watch(currentControlledKey, val => {
+      setCurrent(val);
     });
 
     context.provide({
@@ -170,6 +173,7 @@ const Group = defineComponent({
             visible={isShowPreview.value}
             prefixCls={props.previewPrefixCls}
             onClose={onPreviewClose}
+            onAfterClose={onPreviewAfterClose}
             mousePosition={mousePosition.value}
             src={canPreviewUrls.value.get(current.value)}
             icons={props.icons}

From 087b6a4914e6bda5a4e26a08d8882f49269c17c7 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Tue, 12 Apr 2022 10:42:11 +0800
Subject: [PATCH 07/13] update code

---
 components/vc-image/src/PreviewGroup.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/vc-image/src/PreviewGroup.tsx b/components/vc-image/src/PreviewGroup.tsx
index 54caca1484..0c30d66536 100644
--- a/components/vc-image/src/PreviewGroup.tsx
+++ b/components/vc-image/src/PreviewGroup.tsx
@@ -1,5 +1,5 @@
 import type { PropType, Ref, ComputedRef } from 'vue';
-import { ref, provide, defineComponent, inject, watch, reactive, computed } from 'vue';
+import { ref, provide, defineComponent, inject, watch, reactive, computed, watchEffect } from 'vue';
 import { type ImagePreviewType, mergeDefaultValue } from './Image';
 import Preview from './Preview';
 import type { PreviewProps } from './Preview';
@@ -81,7 +81,7 @@ const Group = defineComponent({
         : defaultValues;
     });
     const previewUrls = reactive<Map<number, PreviewUrl>>(new Map());
-    const current = ref(preview.value.current);
+    const current = ref<number>();
 
     const previewVisible = computed(() => preview.value.visible);
     const onPreviewVisibleChange = computed(() => preview.value.onVisibleChange);
@@ -135,12 +135,6 @@ const Group = defineComponent({
       mousePosition.value = null;
     };
 
-    const onPreviewAfterClose = () => {
-      if (!isShowPreview.value && isControlled.value) {
-        setCurrent(currentControlledKey.value);
-      }
-    };
-
     watch(previewVisible, () => {
       isShowPreview.value = !!previewVisible.value;
     });
@@ -150,6 +144,16 @@ const Group = defineComponent({
     watch(currentControlledKey, val => {
       setCurrent(val);
     });
+    watchEffect(
+      () => {
+        if (!isShowPreview.value && isControlled.value) {
+          setCurrent(currentControlledKey.value);
+        }
+      },
+      {
+        flush: 'post',
+      },
+    );
 
     context.provide({
       isPreviewGroup: ref(true),
@@ -173,7 +177,6 @@ const Group = defineComponent({
             visible={isShowPreview.value}
             prefixCls={props.previewPrefixCls}
             onClose={onPreviewClose}
-            onAfterClose={onPreviewAfterClose}
             mousePosition={mousePosition.value}
             src={canPreviewUrls.value.get(current.value)}
             icons={props.icons}

From ee4e0573daa756b31a6a0872cd49e97348825e0e Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Tue, 12 Apr 2022 11:34:13 +0800
Subject: [PATCH 08/13] update code

---
 components/vc-image/src/Image.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index 93a3078b2c..32cb640826 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -4,6 +4,7 @@ import isNumber from 'lodash-es/isNumber';
 import cn from '../../_util/classNames';
 import PropTypes from '../../_util/vue-types';
 import { getOffset } from '../../vc-util/Dom/css';
+import useMergedState from '../../_util/hooks/useMergedState';
 import Preview from './Preview';
 
 import type { MouseEventHandler } from '../../_util/EventInterface';
@@ -95,9 +96,12 @@ const ImageInternal = defineComponent({
     const getPreviewContainer = computed(() => preview.value.getContainer);
 
     const isControlled = computed(() => previewVisible.value !== undefined);
-    const isShowPreview = ref(!!previewVisible.value);
+    const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible.value, {
+      value: previewVisible,
+      onChange: onPreviewVisibleChange.value,
+    });
     watch(previewVisible, val => {
-      isShowPreview.value = Boolean(val);
+      setShowPreview(Boolean(val));
     });
     watch(isShowPreview, (val, preVal) => {
       onPreviewVisibleChange.value(val, preVal);
@@ -149,13 +153,13 @@ const ImageInternal = defineComponent({
       if (isPreviewGroup.value) {
         setGroupShowPreview(true);
       } else {
-        isShowPreview.value = true;
+        setShowPreview(true);
       }
       emit('click', e);
     };
 
     const onPreviewClose = () => {
-      isShowPreview.value = false;
+      setShowPreview(false);
       if (!isControlled.value) {
         mousePosition.value = null;
       }
@@ -247,7 +251,7 @@ const ImageInternal = defineComponent({
           <div
             class={wrappperClass}
             onClick={
-              canPreview.value && !Object.is(previewVisible.value, false)
+              canPreview.value
                 ? onPreview
                 : e => {
                     emit('click', e);

From 579ab43012fbcaec7e28f41ac11236950a7e112a Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Tue, 12 Apr 2022 14:40:18 +0800
Subject: [PATCH 09/13] update code

---
 components/vc-image/src/Image.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index 32cb640826..32d27bc888 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -92,19 +92,21 @@ const ImageInternal = defineComponent({
       () => (props.placeholder && props.placeholder !== true) || slots.placeholder,
     );
     const previewVisible = computed(() => preview.value.visible);
-    const onPreviewVisibleChange = computed(() => preview.value.onVisibleChange);
     const getPreviewContainer = computed(() => preview.value.getContainer);
-
     const isControlled = computed(() => previewVisible.value !== undefined);
+
+    const onPreviewVisibleChange = (val, preval) => {
+      preview.value.onVisibleChange?.(val, preval);
+    };
     const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible.value, {
       value: previewVisible,
-      onChange: onPreviewVisibleChange.value,
+      onChange: onPreviewVisibleChange,
     });
     watch(previewVisible, val => {
       setShowPreview(Boolean(val));
     });
     watch(isShowPreview, (val, preVal) => {
-      onPreviewVisibleChange.value(val, preVal);
+      onPreviewVisibleChange(val, preVal);
     });
     const status = ref<ImageStatus>(isCustomPlaceholder.value ? 'loading' : 'normal');
     watch(

From 0f306af65ddeb497ddf200c21306fb211022c22d Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Tue, 12 Apr 2022 17:15:30 +0800
Subject: [PATCH 10/13] update code

---
 components/vc-image/src/Preview.tsx      |  4 ++--
 components/vc-image/src/PreviewGroup.tsx | 12 +++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index a85a622e0d..3697257ab8 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -6,7 +6,7 @@ import {
   reactive,
   ref,
   watch,
-  createVNode,
+  cloneVNode,
 } from 'vue';
 import type { VNode, PropType } from 'vue';
 
@@ -294,7 +294,7 @@ const Preview = defineComponent({
                 onClick={onClick}
                 key={type}
               >
-                {createVNode(IconType, { class: iconClassName })}
+                {cloneVNode(IconType, { class: iconClassName })}
               </li>
             ))}
           </ul>
diff --git a/components/vc-image/src/PreviewGroup.tsx b/components/vc-image/src/PreviewGroup.tsx
index 0c30d66536..04d638c848 100644
--- a/components/vc-image/src/PreviewGroup.tsx
+++ b/components/vc-image/src/PreviewGroup.tsx
@@ -141,9 +141,15 @@ const Group = defineComponent({
     watch(isShowPreview, (val, preVal) => {
       onPreviewVisibleChange.value(val, preVal);
     });
-    watch(currentControlledKey, val => {
-      setCurrent(val);
-    });
+    watch(
+      currentControlledKey,
+      val => {
+        setCurrent(val);
+      },
+      {
+        immediate: true,
+      },
+    );
     watchEffect(
       () => {
         if (!isShowPreview.value && isControlled.value) {

From b5fee32f24c566002fd504cb325a3b851e87feba Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Tue, 12 Apr 2022 17:19:28 +0800
Subject: [PATCH 11/13] update code

---
 components/vc-image/src/Image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index 32d27bc888..f64cd3fc27 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -222,7 +222,7 @@ const ImageInternal = defineComponent({
         class: cls,
         style,
       } = attrs as ImgHTMLAttributes;
-      const { icons, src: previewSrc, ...dialogProps } = preview.value;
+      const { icons, maskClassName, src: previewSrc, ...dialogProps } = preview.value;
 
       const wrappperClass = cn(prefixCls, wrapperClassName, {
         [`${prefixCls}-error`]: isError.value,
@@ -282,7 +282,7 @@ const ImageInternal = defineComponent({
             )}
             {/* Preview Click Mask */}
             {slots.previewMask && canPreview.value && (
-              <div class={`${prefixCls}-mask`}>{slots.previewMask()}</div>
+              <div class={[`${prefixCls}-mask`, maskClassName]}>{slots.previewMask()}</div>
             )}
           </div>
           {!isPreviewGroup.value && canPreview.value && (

From 97f9f65f9633d1d212989d2ac8ab2319aa977fe8 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Tue, 12 Apr 2022 17:40:15 +0800
Subject: [PATCH 12/13] add rootClassName props

---
 components/vc-image/src/Image.tsx        | 5 ++++-
 components/vc-image/src/Preview.tsx      | 8 ++++++--
 components/vc-image/src/PreviewGroup.tsx | 2 ++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index f64cd3fc27..abd7c721fd 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -42,6 +42,7 @@ export const imageProps = () => ({
   src: String,
   wrapperClassName: String,
   wrapperStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+  rootClassName: String,
   prefixCls: String,
   previewPrefixCls: String,
   placeholder: PropTypes.any,
@@ -209,6 +210,7 @@ const ImageInternal = defineComponent({
         src: imgSrc,
         placeholder,
         wrapperStyle,
+        rootClassName,
       } = props;
       const {
         width,
@@ -224,7 +226,7 @@ const ImageInternal = defineComponent({
       } = attrs as ImgHTMLAttributes;
       const { icons, maskClassName, src: previewSrc, ...dialogProps } = preview.value;
 
-      const wrappperClass = cn(prefixCls, wrapperClassName, {
+      const wrappperClass = cn(prefixCls, wrapperClassName, rootClassName, {
         [`${prefixCls}-error`]: isError.value,
       });
       const mergedSrc = isError.value && fallback ? fallback : previewSrc ?? imgSrc;
@@ -297,6 +299,7 @@ const ImageInternal = defineComponent({
               alt={alt}
               getContainer={getPreviewContainer.value}
               icons={icons}
+              rootClassName={rootClassName}
             />
           )}
         </>
diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index 3697257ab8..aada154b1a 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -46,6 +46,7 @@ export const previewProps = {
   ...dialogPropTypes(),
   src: String,
   alt: String,
+  rootClassName: String,
   icons: {
     type: Object as PropType<PreviewProps['icons']>,
     default: () => ({} as PreviewProps['icons']),
@@ -271,6 +272,8 @@ const Preview = defineComponent({
     });
 
     return () => {
+      const { visible, prefixCls, rootClassName } = props;
+
       return (
         <Dialog
           {...attrs}
@@ -278,11 +281,12 @@ const Preview = defineComponent({
           maskTransitionName="fade"
           closable={false}
           keyboard
-          prefixCls={props.prefixCls}
+          prefixCls={prefixCls}
           onClose={onClose}
           afterClose={onAfterClose}
-          visible={props.visible}
+          visible={visible}
           wrapClassName={wrapClassName}
+          rootClassName={rootClassName}
           getContainer={props.getContainer}
         >
           <ul class={`${props.prefixCls}-operations`}>
diff --git a/components/vc-image/src/PreviewGroup.tsx b/components/vc-image/src/PreviewGroup.tsx
index 04d638c848..e9705b5570 100644
--- a/components/vc-image/src/PreviewGroup.tsx
+++ b/components/vc-image/src/PreviewGroup.tsx
@@ -50,6 +50,7 @@ export const context = {
       setShowPreview: () => {},
       setMousePosition: () => {},
       registerImage: null,
+      rootClassName: '',
     });
   },
 };
@@ -148,6 +149,7 @@ const Group = defineComponent({
       },
       {
         immediate: true,
+        flush: 'post',
       },
     );
     watchEffect(

From af918909e22eb28649d75af42adcae60e4edaca9 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Wed, 13 Apr 2022 09:13:33 +0800
Subject: [PATCH 13/13] fix lint

---
 components/vc-dialog/Dialog.tsx          | 3 ++-
 components/vc-dialog/IDialogPropTypes.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/vc-dialog/Dialog.tsx b/components/vc-dialog/Dialog.tsx
index 1dd6d248a2..1a37b40b59 100644
--- a/components/vc-dialog/Dialog.tsx
+++ b/components/vc-dialog/Dialog.tsx
@@ -143,6 +143,7 @@ export default defineComponent({
         maskAnimation,
         zIndex,
         wrapClassName,
+        rootClassName,
         wrapStyle,
         closable,
         maskProps,
@@ -154,7 +155,7 @@ export default defineComponent({
       } = props;
       const { style, class: className } = attrs;
       return (
-        <div class={`${prefixCls}-root`} {...pickAttrs(props, { data: true })}>
+        <div class={[`${prefixCls}-root`, rootClassName]} {...pickAttrs(props, { data: true })}>
           <Mask
             prefixCls={prefixCls}
             visible={mask && visible}
diff --git a/components/vc-dialog/IDialogPropTypes.ts b/components/vc-dialog/IDialogPropTypes.ts
index c6abe677d4..7ea0ec82c7 100644
--- a/components/vc-dialog/IDialogPropTypes.ts
+++ b/components/vc-dialog/IDialogPropTypes.ts
@@ -25,6 +25,7 @@ export function dialogPropTypes() {
     maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
     prefixCls: String,
     wrapClassName: String,
+    rootClassName: String,
     width: [String, Number],
     height: [String, Number],
     zIndex: Number,