Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dialog): add new keyboardEnabled prop #13178

Merged
merged 5 commits into from
Nov 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/vant/src/dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export const dialogProps = extend({}, popupSharedProps, {
confirmButtonDisabled: Boolean,
showConfirmButton: truthProp,
closeOnClickOverlay: Boolean,
keyboardEnabled: truthProp,
});

export type DialogProps = ExtractPropTypes<typeof dialogProps>;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions packages/vant/src/dialog/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ Vant exports following Dialog utility functions:
| beforeClose | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |
| 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

Expand Down Expand Up @@ -213,6 +214,7 @@ Vant exports following Dialog utility functions:
| before-close | Callback function before close | _(action: string) => boolean \| Promise\<boolean\>_ | - |
| 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

Expand Down
2 changes: 2 additions & 0 deletions packages/vant/src/dialog/README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ Vant 中导出了以下 Dialog 相关的辅助函数:
| beforeClose | 关闭前的回调函数,返回 `false` 可阻止关闭,支持返回 Promise | _(action: string) => boolean \| Promise\<boolean\>_ | - |
| 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

Expand Down Expand Up @@ -215,6 +216,7 @@ Vant 中导出了以下 Dialog 相关的辅助函数:
| before-close | 关闭前的回调函数,返回 `false` 可阻止关闭,支持返回 Promise | _(action: string) => boolean \| Promise\<boolean\>_ | - |
| 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

Expand Down