diff --git a/packages/vant/src/dialog/Dialog.tsx b/packages/vant/src/dialog/Dialog.tsx index 3d872e2a64f..d825de574da 100644 --- a/packages/vant/src/dialog/Dialog.tsx +++ b/packages/vant/src/dialog/Dialog.tsx @@ -62,6 +62,7 @@ export const dialogProps = extend({}, popupSharedProps, { confirmButtonDisabled: Boolean, showConfirmButton: truthProp, closeOnClickOverlay: Boolean, + keyboardEnabled: truthProp, }); export type DialogProps = ExtractPropTypes; @@ -122,6 +123,9 @@ export default defineComponent({ const onConfirm = getActionHandler('confirm'); const onKeydown = withKeys( (event: KeyboardEvent) => { + if (!props.keyboardEnabled) { + return; + } // skip keyboard events of child elements if (event.target !== root.value?.popupRef?.value) { return; diff --git a/packages/vant/src/dialog/README.md b/packages/vant/src/dialog/README.md index 2c6fa0f6fa2..58d0308be36 100644 --- a/packages/vant/src/dialog/README.md +++ b/packages/vant/src/dialog/README.md @@ -182,6 +182,7 @@ Vant exports following Dialog utility functions: | beforeClose | Callback function before close | _(action: string) => boolean \| Promise\_ | - | | transition | Transition, equivalent to `name` prop of [transition](https://vuejs.org/api/built-in-components.html#transition) | _string_ | - | | teleport | Specifies a target element where Dialog will be mounted | _string \| Element_ | `body` | +| keyboardEnabled | Whether to enable keyboard capabilities. When displaying the confirm and cancel buttons, the keyboard's `Enter` and `Esc` will call the `confirm` and `cancel` functions by default | _boolean_ | `true` | ### Props @@ -213,6 +214,7 @@ Vant exports following Dialog utility functions: | before-close | Callback function before close | _(action: string) => boolean \| Promise\_ | - | | transition | Transition, equivalent to `name` prop of [transition](https://vuejs.org/api/built-in-components.html#transition) | _string_ | - | | teleport | Specifies a target element where Dialog will be mounted | _string \| Element_ | - | +| keyboard-enabled | Whether to enable keyboard capabilities. When displaying the confirm and cancel buttons, the keyboard's `Enter` and `Esc` will call the `confirm` and `cancel` functions by default | _boolean_ | `true` | ### Events diff --git a/packages/vant/src/dialog/README.zh-CN.md b/packages/vant/src/dialog/README.zh-CN.md index 67c94e61451..505da72fe6b 100644 --- a/packages/vant/src/dialog/README.zh-CN.md +++ b/packages/vant/src/dialog/README.zh-CN.md @@ -182,6 +182,7 @@ Vant 中导出了以下 Dialog 相关的辅助函数: | beforeClose | 关闭前的回调函数,返回 `false` 可阻止关闭,支持返回 Promise | _(action: string) => boolean \| Promise\_ | - | | transition | 动画类名,等价于 [transition](https://cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - | | teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | `body` | +| keyboardEnabled | 是否启用键盘能力,在展示确认和取消按钮的时候,默认情况下键盘的 `Enter` 和 `Esc` 会执行 `confirm` 和 `cancel` 函数 | _boolean_ | `true` | ### Props @@ -215,6 +216,7 @@ Vant 中导出了以下 Dialog 相关的辅助函数: | before-close | 关闭前的回调函数,返回 `false` 可阻止关闭,支持返回 Promise | _(action: string) => boolean \| Promise\_ | - | | transition | 动画类名,等价于 [transition](https://cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - | | teleport | 指定挂载的节点,等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - | +| keyboard-enabled | 是否启用键盘能力,在展示确认和取消按钮的时候,默认情况下键盘的 `Enter` 和 `Esc` 会执行 `confirm` 和 `cancel` 函数 | _boolean_ | `true` | ### Events