feat(Popover): add overlay-class prop (#8353)

* feat(Popover): add overlay-class prop

* chore: upd

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')}>

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` |

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` |