feat(ImagePreview): add overlayClass option (#10044)

* feat(ImagePreview): add overlayClass option

* chore: update

packages/vant/src/image-preview/ImagePreview.tsx

@@ -61,6 +61,7 @@ const imagePreviewProps = {
   closeIcon: makeStringProp('clear'),
   transition: String,
   beforeClose: Function as PropType<Interceptor>,
+  overlayClass: unknownProp,
   overlayStyle: Object as PropType<CSSProperties>,
   swipeDuration: makeNumericProp(300),
   startPosition: makeNumericProp(0),
@@ -215,7 +216,7 @@ export default defineComponent({
     return () => (
       <Popup
         class={[bem(), props.className]}
-        overlayClass={bem('overlay')}
+        overlayClass={[bem('overlay'), props.overlayClass]}
         onClosed={onClosed}
         onUpdate:show={updateShow}
         {...pick(props, popupProps)}

packages/vant/src/image-preview/README.md

@@ -142,7 +142,8 @@ export default {
 | closeIcon | Close icon name | _string_ | `clear` |
 | closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 | transition `v3.0.8` | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
-| overlay-style `v3.0.8` | Custom overlay style | _object_ | - |
+| overlayClass `v3.2.8` | Custom overlay class | _string \| Array \| object_ | - |
+| overlayStyle `v3.0.8` | Custom overlay style | _object_ | - |
 | teleport | Specifies a target element where ImagePreview will be mounted | _string \| Element_ | - |
 
 ### Props
@@ -165,6 +166,7 @@ export default {
 | close-icon | Close icon name | _string_ | `clear` |
 | close-icon-position | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 | transition `v3.0.8` | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
+| overlay-class `v3.2.8` | Custom overlay class | _string \| Array \| object_ | - |
 | overlay-style `v3.0.8` | Custom overlay style | _object_ | - |
 | teleport | Specifies a target element where ImagePreview will be mounted | _string \| Element_ | - |
 

packages/vant/src/image-preview/README.zh-CN.md

@@ -188,7 +188,8 @@ export default {
 | closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` |
 | closeIconPosition | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
 | transition `v3.0.8` | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
-| overlay-style `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
+| overlayClass `v3.2.8` | 自定义遮罩层类名 | _string \| Array \| object_ | - |
+| overlayStyle `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
 
 ### Props
@@ -213,6 +214,7 @@ export default {
 | close-icon | 关闭图标名称或图片链接 | _string_ | `clear` |
 | close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
 | transition `v3.0.8` | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
+| overlay-class `v3.2.8` | 自定义遮罩层类名 | _string \| Array \| object_ | - |
 | overlay-style `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
 

packages/vant/src/image-preview/function-call.tsx

@@ -22,6 +22,7 @@ const defaultConfig: ImagePreviewOptions = {
   transition: undefined,
   beforeClose: undefined,
   overlayStyle: undefined,
+  overlayClass: undefined,
   startPosition: 0,
   swipeDuration: 300,
   showIndicators: false,

packages/vant/src/image-preview/types.ts

@@ -21,6 +21,7 @@ export type ImagePreviewOptions = {
   transition?: string;
   beforeClose?: Interceptor;
   overlayStyle?: CSSProperties;
+  overlayClass?: unknown;
   swipeDuration?: number;
   startPosition?: number;
   showIndicators?: boolean;