feat(Popup): add overlay-props prop (#13443)

packages/vant/src/dropdown-item/DropdownItem.tsx

@@ -211,7 +211,9 @@ export default defineComponent({
             role="menu"
             class={bem('content')}
             overlay={overlay}
-            disableOverlayTransition={parent.opened.value}
+            overlayProps={{
+              duration: state.transition && !parent.opened.value ? duration : 0,
+            }}
             position={direction === 'down' ? 'top' : 'bottom'}
             duration={state.transition ? duration : 0}
             lazyRender={props.lazyRender}

packages/vant/src/popup/Popup.tsx

@@ -135,16 +135,23 @@ export default defineComponent({
 
     const renderOverlay = () => {
       if (props.overlay) {
+        const overlayProps = extend(
+          {
+            show: props.show,
+            class: props.overlayClass,
+            zIndex: zIndex.value,
+            duration: props.duration,
+            customStyle: props.overlayStyle,
+            role: props.closeOnClickOverlay ? 'button' : undefined,
+            tabindex: props.closeOnClickOverlay ? 0 : undefined,
+          },
+          props.overlayProps,
+        );
+
         return (
           <Overlay
             v-slots={{ default: slots['overlay-content'] }}
-            show={props.show}
+            {...overlayProps}
-            class={props.overlayClass}
-            zIndex={zIndex.value}
-            duration={props.disableOverlayTransition ? 0 : props.duration}
-            customStyle={props.overlayStyle}
-            role={props.closeOnClickOverlay ? 'button' : undefined}
-            tabindex={props.closeOnClickOverlay ? 0 : undefined}
             {...useScopeId()}
             onClick={onClickOverlay}
           />

packages/vant/src/popup/README.md

@@ -223,11 +223,11 @@ Use `teleport` prop to specify mount location.
 | position | Can be set to `top` `bottom` `right` `left` | _string_ | `center` |
 | overlay-class | Custom overlay class | _string \| Array \| object_ | - |
 | overlay-style | Custom overlay style | _object_ | - |
+| overlay-props | Overlay props, see [Overlay](#/en-US/overlay#api) component | _object_ | - |
 | duration | Transition duration, unit second | _number \| string_ | `0.3` |
 | z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
 | round | Whether to show round corner | _boolean_ | `false` |
 | destroy-on-close `v4.9.10` | Whether to destroy content when closed | _boolean_ | `false` |
-| disableOverlayTransition | Whether to disable overlay transition | _boolean_ | `false` |
 | lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
 | lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
 | close-on-popstate | Whether to close when popstate | _boolean_ | `false` |

packages/vant/src/popup/README.zh-CN.md

@@ -225,11 +225,11 @@ export default {
 | position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
 | overlay-class | 自定义遮罩层类名 | _string \| Array \| object_ | - |
 | overlay-style | 自定义遮罩层样式 | _object_ | - |
+| overlay-props | 遮罩层属性，参考 [Overlay](#/zh-CN/overlay#api) 组件 | _object_ | - |
 | duration | 动画时长，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
 | z-index | 将弹窗的 z-index 层级设置为一个固定值 | _number \| string_ | `2000+` |
 | round | 是否显示圆角 | _boolean_ | `false` |
 | destroy-on-close `v4.9.10` | 是否在关闭时销毁内容 | _boolean_ | `false` |
-| disableOverlayTransition | 是否禁用遮罩层动画 | _boolean_ | `false` |
 | lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
 | lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
 | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |

packages/vant/src/popup/shared.ts

@@ -1,3 +1,4 @@
+import type { OverlayProps } from '../overlay';
 import { truthProp, unknownProp, Interceptor, numericProp } from '../utils';
 import type { PropType, CSSProperties, TeleportProps } from 'vue';
 
@@ -10,8 +11,6 @@ export const popupSharedProps = {
   overlay: truthProp,
   // transition duration
   duration: numericProp,
-  // disable overlay transition
-  disableOverlayTransition: Boolean,
   // teleport
   teleport: [String, Object] as PropType<TeleportProps['to']>,
   // prevent body scroll
@@ -20,6 +19,8 @@ export const popupSharedProps = {
   lazyRender: truthProp,
   // callback function before close
   beforeClose: Function as PropType<Interceptor>,
+  // overlay props
+  overlayProps: Object as PropType<Partial<OverlayProps>>,
   // overlay custom style
   overlayStyle: Object as PropType<CSSProperties>,
   // overlay custom class name