From e343c7a9700ccc2222ec7e55c841b41b8a833956 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 19 Apr 2025 21:22:08 +0800 Subject: [PATCH] feat(Popup): add overlay-props prop (#13443) --- .../vant/src/dropdown-item/DropdownItem.tsx | 4 +++- packages/vant/src/popup/Popup.tsx | 21 ++++++++++++------- packages/vant/src/popup/README.md | 2 +- packages/vant/src/popup/README.zh-CN.md | 2 +- packages/vant/src/popup/shared.ts | 5 +++-- 5 files changed, 22 insertions(+), 12 deletions(-) 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