feat(Image): add previewMask prop (#5531)

* fix(Image): can not cancel previewMask

* remove redundant code

* remove redundant code

* update code

components/image/index.en-US.md

@@ -22,7 +22,7 @@ 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 |
+| previewMask | custom mask | boolean \| function \| slot | - | 3.2.0 |
 | width | Image width | string \| number | - | 2.0.0 |
 
 ### events

components/image/index.tsx

@@ -49,13 +49,16 @@ const Image = defineComponent<ImageProps>({
           v-slots={{
             ...slots,
             previewMask:
-              slots.previewMask ??
+              props.previewMask === false
-              (() => (
+                ? null
-                <div class={`${prefixCls.value}-mask-info`}>
+                : props.previewMask ??
-                  <EyeOutlined />
+                  slots.previewMask ??
-                  {imageLocale?.preview}
+                  (() => (
-                </div>
+                    <div class={`${prefixCls.value}-mask-info`}>
-              )),
+                      <EyeOutlined />
+                      {imageLocale?.preview}
+                    </div>
+                  )),
           }}
         ></ImageInternal>
       );

components/image/index.zh-CN.md

@@ -23,7 +23,7 @@ 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 |
+| previewMask | 自定义 mask | boolean \| function \| slot | - | 3.2.0 |
 | width | 图像宽度 | string \| number | - | 2.0.0 |
 
 ### 事件

components/vc-image/src/Image.tsx

@@ -25,19 +25,6 @@ export type ImagePreviewType = Omit<
   icons?: PreviewProps['icons'];
 };
 
-export interface ImagePropsType extends Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'> {
-  // Original
-  src?: string;
-  wrapperClassName?: string;
-  wrapperStyle?: CSSProperties;
-  prefixCls?: string;
-  previewPrefixCls?: string;
-  placeholder?: boolean;
-  fallback?: string;
-  preview?: boolean | ImagePreviewType;
-  onClick?: MouseEventHandler;
-  onError?: HTMLImageElement['onerror'];
-}
 export const imageProps = () => ({
   src: String,
   wrapperClassName: String,
@@ -45,6 +32,10 @@ export const imageProps = () => ({
   rootClassName: String,
   prefixCls: String,
   previewPrefixCls: String,
+  previewMask: {
+    type: [Boolean, Function] as PropType<boolean | (() => any)>,
+    default: undefined,
+  },
   placeholder: PropTypes.any,
   fallback: String,
   preview: {
@@ -103,9 +94,7 @@ const ImageInternal = defineComponent({
       value: previewVisible,
       onChange: onPreviewVisibleChange,
     });
-    watch(previewVisible, val => {
+
-      setShowPreview(Boolean(val));
-    });
     watch(isShowPreview, (val, preVal) => {
       onPreviewVisibleChange(val, preVal);
     });

components/vc-image/src/PreviewGroup.tsx

@@ -3,6 +3,7 @@ import { ref, provide, defineComponent, inject, watch, reactive, computed, watch
 import { type ImagePreviewType, mergeDefaultValue } from './Image';
 import Preview from './Preview';
 import type { PreviewProps } from './Preview';
+import useMergedState from '../../_util/hooks/useMergedState';
 
 export interface PreviewGroupPreview
   extends Omit<ImagePreviewType, 'icons' | 'mask' | 'maskClassName'> {
@@ -85,10 +86,14 @@ const Group = defineComponent({
     const current = ref<number>();
 
     const previewVisible = computed(() => preview.value.visible);
-    const onPreviewVisibleChange = computed(() => preview.value.onVisibleChange);
     const getPreviewContainer = computed(() => preview.value.getContainer);
-
+    const onPreviewVisibleChange = (val, preval) => {
-    const isShowPreview = ref(!!previewVisible.value);
+      preview.value.onVisibleChange?.(val, preval);
+    };
+    const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible.value, {
+      value: previewVisible,
+      onChange: onPreviewVisibleChange,
+    });
 
     const mousePosition = ref<{ x: number; y: number }>(null);
     const isControlled = computed(() => previewVisible.value !== undefined);
@@ -115,9 +120,6 @@ const Group = defineComponent({
     const setMousePosition = (val: null | { x: number; y: number }) => {
       mousePosition.value = val;
     };
-    const setShowPreview = (val: boolean) => {
-      isShowPreview.value = val;
-    };
 
     const registerImage = (id: number, url: string, canPreview = true) => {
       const unRegister = () => {
@@ -132,16 +134,10 @@ const Group = defineComponent({
 
     const onPreviewClose = (e: any) => {
       e?.stopPropagation();
-      isShowPreview.value = false;
+      setShowPreview(false);
-      mousePosition.value = null;
+      setMousePosition(null);
     };
 
-    watch(previewVisible, () => {
-      isShowPreview.value = !!previewVisible.value;
-    });
-    watch(isShowPreview, (val, preVal) => {
-      onPreviewVisibleChange.value(val, preVal);
-    });
     watch(
       currentControlledKey,
       val => {