fix(Image): can not cancel previewMask

Author: buqiyuan

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 \| VNode \| VNode[] \| slot | true | 3.2.0 |
 | width | Image width | string \| number | - | 2.0.0 |
 
 ### events

components/image/index.tsx

@@ -1,5 +1,5 @@
 import type { App, ExtractPropTypes, ImgHTMLAttributes, Plugin } from 'vue';
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, isVNode } from 'vue';
 import ImageInternal from '../vc-image';
 import { imageProps } from '../vc-image/src/Image';
 import defaultLocale from '../locale/en_US';
@@ -49,13 +49,17 @@ const Image = defineComponent<ImageProps>({
           v-slots={{
             ...slots,
             previewMask:
-              slots.previewMask ??
-              (() => (
-                <div class={`${prefixCls.value}-mask-info`}>
-                  <EyeOutlined />
-                  {imageLocale?.preview}
-                </div>
-              )),
+              props.previewMask === false
+                ? null
+                : isVNode(props.previewMask)
+                ? props.previewMask
+                : slots.previewMask ??
+                  (() => (
+                    <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 \| VNode \| VNode[] \| slot | true | 3.2.0 |
 | width | 图像宽度 | string \| number | - | 2.0.0 |
 
 ### 事件

components/vc-image/src/Image.tsx

@@ -1,4 +1,4 @@
-import type { ImgHTMLAttributes, CSSProperties, PropType } from 'vue';
+import type { ImgHTMLAttributes, CSSProperties, PropType, VNode } from 'vue';
 import { ref, watch, defineComponent, computed, onMounted, onUnmounted } from 'vue';
 import isNumber from 'lodash-es/isNumber';
 import cn from '../../_util/classNames';
@@ -45,6 +45,10 @@ export const imageProps = () => ({
   rootClassName: String,
   prefixCls: String,
   previewPrefixCls: String,
+  previewMask: {
+    type: [Boolean, Object, Array] as PropType<boolean | VNode | VNode[]>,
+    default: true,
+  },
   placeholder: PropTypes.any,
   fallback: String,
   preview: {