From 536f2fad38e1ecbb72dd513cb9c5e122302a5596 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 15 Mar 2021 20:17:29 +0800
Subject: [PATCH] feat(Popover): add overlay-class prop (#8353)

* feat(Popover): add overlay-class prop

* chore: upd
---
 src/popover/Popover.tsx     | 26 ++++++++++++++++++++------
 src/popover/README.md       |  1 +
 src/popover/README.zh-CN.md |  1 +
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
index dac244f19..9ff359f4f 100644
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -11,7 +11,12 @@ import {
 import { Instance, createPopper, offsetModifier } from '@vant/popperjs';
 
 // Utils
-import { ComponentInstance, createNamespace } from '../utils';
+import {
+  pick,
+  UnknownProp,
+  createNamespace,
+  ComponentInstance,
+} from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
 // Composables
@@ -23,6 +28,14 @@ import { Popup } from '../popup';
 
 const [name, bem] = createNamespace('popover');
 
+const popupProps = [
+  'show',
+  'overlay',
+  'teleport',
+  'overlayClass',
+  'closeOnClickOverlay',
+] as const;
+
 export type PopoverTheme = 'light' | 'dark';
 export type PopoverTrigger = 'manual' | 'click';
 export type PopoverPlacement =
@@ -53,6 +66,7 @@ export default defineComponent({
   props: {
     show: Boolean,
     overlay: Boolean,
+    overlayClass: UnknownProp,
     offset: {
       type: (Array as unknown) as PropType<[number, number]>,
       default: () => [0, 8],
@@ -204,16 +218,16 @@ export default defineComponent({
         </span>
         <Popup
           ref={popoverRef}
-          show={props.show}
           class={bem([props.theme])}
-          overlay={props.overlay}
           position={''}
-          teleport={props.teleport}
           transition="van-popover-zoom"
           lockScroll={false}
           onTouchstart={onTouchstart}
-          closeOnClickOverlay={props.closeOnClickOverlay}
-          {...{ ...attrs, 'onUpdate:show': updateShow }}
+          {...{
+            ...attrs,
+            ...pick(props, popupProps),
+            'onUpdate:show': updateShow,
+          }}
         >
           <div class={bem('arrow')} />
           <div role="menu" class={bem('content')}>
diff --git a/src/popover/README.md b/src/popover/README.md
index 9f36a85a4..b54fb641c 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -211,6 +211,7 @@ export default {
 | trigger | Trigger mode，can be set to `manual` | `click` |
 | offset | Distance to reference | _[number, number]_ | `[0, 8]` |
 | overlay | Whether to show overlay | _boolean_ | `false` |
+| overlay-class `v3.0.10` | Custom overlay class | _string \| Array \| object_ | - |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
 | close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
 | close-on-click-overlay `v3.0.10` | Whether to close when clicking overlay | _boolean_ | `true` |
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 1da585d1e..78a64803e 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -225,6 +225,7 @@ export default {
 | trigger | 触发方式，可选值为 `manual` | `click` |
 | offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
+| overlay-class `v3.0.10` | 自定义遮罩层类名 | _string \| Array \| object_ | - |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
 | close-on-click-overlay `v3.0.10` | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` |