style: update image code, #5531

Author: tangjinzhou

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

components/image/index.tsx

@@ -41,24 +41,20 @@ const Image = defineComponent<ImageProps>({
 
     return () => {
       const imageLocale = configProvider.locale?.Image || defaultLocale.Image;
-
+      const defaultPreviewMask = () => (
+        <div class={`${prefixCls.value}-mask-info`}>
+          <EyeOutlined />
+          {imageLocale?.preview}
+        </div>
+      );
+      const { previewMask = slots.previewMask || defaultPreviewMask } = props;
       return (
         <ImageInternal
           {...{ ...attrs, ...props, prefixCls: prefixCls.value }}
           preview={mergedPreview.value}
           v-slots={{
             ...slots,
-            previewMask:
-              props.previewMask === false
-                ? null
-                : props.previewMask ??
-                  slots.previewMask ??
-                  (() => (
-                    <div class={`${prefixCls.value}-mask-info`}>
-                      <EyeOutlined />
-                      {imageLocale?.preview}
-                    </div>
-                  )),
+            previewMask: typeof previewMask === 'function' ? previewMask : null,
           }}
         ></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 | boolean \| function \| slot | - | 3.2.0 |
+| previewMask | 自定义 mask | false \| function \| slot | - | 3.2.0 |
 | width | 图像宽度 | string \| number | - | 2.0.0 |
 
 ### 事件

components/vc-image/src/Image.tsx

@@ -33,7 +33,7 @@ export const imageProps = () => ({
   prefixCls: String,
   previewPrefixCls: String,
   previewMask: {
-    type: [Boolean, Function] as PropType<boolean | (() => any)>,
+    type: [Boolean, Function] as PropType<false | (() => any)>,
     default: undefined,
   },
   placeholder: PropTypes.any,