feat(image): add new features (#5479)

buqiyuan · web-flow · commit bd87079e121d · 2022-04-14T09:54:45.000+08:00
* 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
diff --git 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
@@ -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
@@ -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="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>
+<!---->
 `;
 
 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="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>
@@ -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="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>
+<!---->
 `;
 
 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="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>
@@ -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="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="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>
+<!---->
+<!---->
 `;
 
 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="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 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="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="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="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>
 `;
+
+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="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/demo/index.vue b/components/image/demo/index.vue
@@ -4,15 +4,17 @@
     <fallback />
     <placeholder />
     <preview-group />
-    <controlled-preview />
     <previewGroupVisibleVue />
+    <previewSrc />
+    <controlled-preview />
   </demo-sort>
 </template>
 
 <script lang="ts">
 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
@@ -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
@@ -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.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.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,12 +17,46 @@ 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;
+
+      if (preview === false) {
+        return preview;
+      }
+      const _preview = typeof preview === 'object' ? preview : {};
+
+      return {
+        icons,
+        ..._preview,
+        transitionName: getTransitionName(rootPrefixCls.value, 'zoom', _preview.transitionName),
+        maskTransitionName: getTransitionName(
+          rootPrefixCls.value,
+          'fade',
+          _preview.maskTransitionName,
+        ),
+      };
+    });
+
     return () => {
+      const imageLocale = configProvider.locale?.Image || defaultLocale.Image;
+
       return (
         <ImageInternal
           {...{ ...attrs, ...props, prefixCls: prefixCls.value }}
-          v-slots={slots}
+          preview={mergedPreview.value}
+          v-slots={{
+            ...slots,
+            previewMask:
+              slots.previewMask ??
+              (() => (
+                <div class={`${prefixCls.value}-mask-info`}>
+                  <EyeOutlined />
+                  {imageLocale?.preview}
+                </div>
+              )),
+          }}
         ></ImageInternal>
       );
     };
diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
@@ -23,7 +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 | - | 3.2.0 |
 
 ### previewType
 
@@ -32,6 +34,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
   visible?: boolean;
   onVisibleChange?: (visible, prevVisible) => void;
   getContainer: string | HTMLElement | (() => HTMLElement);
+  src?: string;
+  maskClassName?: string;
+  current?: number;
 }
 ```
 
diff --git 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
@@ -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 },
@@ -25,6 +25,7 @@ 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,
diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
diff --git a/components/vc-image/src/PreviewGroup.tsx b/components/vc-image/src/PreviewGroup.tsx
