From e50cd0c731592441f651eddb58ebd5dd5f179d6f Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 4 Mar 2021 20:18:51 +0800
Subject: [PATCH] feat(ImagePreview): add overlay-style prop (#8276)

---
 src/image-preview/ImagePreview.tsx | 31 ++++++++++++++++++++++++------
 src/image-preview/README.md        |  2 ++
 src/image-preview/README.zh-CN.md  |  8 +++++---
 src/image-preview/index.tsx        |  4 +++-
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/image-preview/ImagePreview.tsx b/src/image-preview/ImagePreview.tsx
index 9fbeca1ec..d0764dad8 100644
--- a/src/image-preview/ImagePreview.tsx
+++ b/src/image-preview/ImagePreview.tsx
@@ -1,7 +1,20 @@
-import { ref, watch, nextTick, onMounted, PropType, reactive } from 'vue';
+import {
+  ref,
+  watch,
+  nextTick,
+  PropType,
+  reactive,
+  onMounted,
+  CSSProperties,
+} from 'vue';
 
 // Utils
-import { ComponentInstance, UnknownProp, createNamespace } from '../utils';
+import {
+  pick,
+  UnknownProp,
+  createNamespace,
+  ComponentInstance,
+} from '../utils';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 
 // Composables
@@ -28,6 +41,7 @@ export default createComponent({
     transition: String,
     className: UnknownProp,
     beforeClose: Function as PropType<Interceptor>,
+    overlayStyle: Object as PropType<CSSProperties>,
     showIndicators: Boolean,
     images: {
       type: Array as PropType<string[]>,
@@ -217,13 +231,18 @@ export default createComponent({
 
     return () => (
       <Popup
-        show={props.show}
         class={[bem(), props.className]}
-        transition={props.transition}
         overlayClass={bem('overlay')}
-        closeOnPopstate={props.closeOnPopstate}
         onClosed={onClosed}
-        {...{ 'onUpdate:show': updateShow }}
+        {...{
+          ...pick(props, [
+            'show',
+            'transition',
+            'overlayStyle',
+            'closeOnPopstate',
+          ]),
+          'onUpdate:show': updateShow,
+        }}
       >
         {renderClose()}
         {renderImages()}
diff --git a/src/image-preview/README.md b/src/image-preview/README.md
index 3401fc822..05d4d8652 100644
--- a/src/image-preview/README.md
+++ b/src/image-preview/README.md
@@ -140,6 +140,7 @@ 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 [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
+| overlay-style `v3.0.8` | Custom overlay style | _object_ | - |
 | teleport | Return the mount node for ImagePreview | _string \| Element_ | - |
 
 ### Props
@@ -161,6 +162,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 [transtion](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` |
+| overlay-style `v3.0.8` | Custom overlay style | _object_ | - |
 | teleport | Return the mount node for ImagePreview | _string \| Element_ | - |
 
 ### Events
diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md
index 2a7ca3027..be1fb1810 100644
--- a/src/image-preview/README.zh-CN.md
+++ b/src/image-preview/README.zh-CN.md
@@ -176,7 +176,8 @@ export default {
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
 | closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` |
 | closeIconPosition | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
-| transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
+| transition `v3.0.8` | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
+| overlay-style `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
 
 ### Props
@@ -199,8 +200,9 @@ export default {
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
 | close-icon | 关闭图标名称或图片链接 | _string_ | `clear` |
 | close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
-| transition | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
-| teleport `v3.0.8` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
+| transition `v3.0.8` | 动画类名，等价于 [transtion](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | `van-fade` |
+| overlay-style `v3.0.8` | 自定义遮罩层样式 | _object_ | - |
+| teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | - |
 
 ### Events
 
diff --git a/src/image-preview/index.tsx b/src/image-preview/index.tsx
index b2ba5f536..1c4546fc1 100644
--- a/src/image-preview/index.tsx
+++ b/src/image-preview/index.tsx
@@ -1,4 +1,4 @@
-import { App, Plugin, TeleportProps } from 'vue';
+import { App, CSSProperties, Plugin, TeleportProps } from 'vue';
 import { ComponentInstance, inBrowser } from '../utils';
 import { mountComponent, usePopupState } from '../utils/mount-component';
 import { Interceptor } from '../utils/interceptor';
@@ -19,6 +19,7 @@ export type ImagePreviewOptions = {
   closeIcon?: string;
   transition?: string;
   beforeClose?: Interceptor;
+  overlayStyle?: CSSProperties;
   swipeDuration?: number;
   startPosition?: number;
   showIndicators?: boolean;
@@ -44,6 +45,7 @@ const defaultConfig: ImagePreviewOptions = {
   closeIcon: 'clear',
   transition: undefined,
   beforeClose: undefined,
+  overlayStyle: undefined,
   startPosition: 0,
   swipeDuration: 300,
   showIndicators: false,