diff --git a/packages/vant/src/dropdown-item/DropdownItem.tsx b/packages/vant/src/dropdown-item/DropdownItem.tsx
index 8aa64539e..d95e10e3b 100644
--- a/packages/vant/src/dropdown-item/DropdownItem.tsx
+++ b/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}
diff --git a/packages/vant/src/popup/Popup.tsx b/packages/vant/src/popup/Popup.tsx
index a393e6106..4ceb6ae62 100644
--- a/packages/vant/src/popup/Popup.tsx
+++ b/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 (
diff --git a/packages/vant/src/popup/README.md b/packages/vant/src/popup/README.md
index af060f281..a7b32cea8 100644
--- a/packages/vant/src/popup/README.md
+++ b/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` |
diff --git a/packages/vant/src/popup/README.zh-CN.md b/packages/vant/src/popup/README.zh-CN.md
index 52b6cff59..e54972aba 100644
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/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` |
diff --git a/packages/vant/src/popup/shared.ts b/packages/vant/src/popup/shared.ts
index c2826a98f..4dde2fb67 100644
--- a/packages/vant/src/popup/shared.ts
+++ b/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,
// prevent body scroll
@@ -20,6 +19,8 @@ export const popupSharedProps = {
lazyRender: truthProp,
// callback function before close
beforeClose: Function as PropType,
+ // overlay props
+ overlayProps: Object as PropType>,
// overlay custom style
overlayStyle: Object as PropType,
// overlay custom class name