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 2 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
5 changes: 5 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,10 @@ export default defineComponent({
const onConfirm = getActionHandler('confirm');
const onKeydown = withKeys(
(event: KeyboardEvent) => {
// disable keyboard events when loading
chenjiahan marked this conversation as resolved.
Show resolved Hide resolved
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 or not the keyboard capability is used, the `Enter` and `Esc` keys by default execute the confirm and cancel functions when the `confirm` and `cancel` buttons are displayed | _boolean_ | `true` |
chenjiahan marked this conversation as resolved.
Show resolved Hide resolved

### 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 or not the keyboard capability is used, the `Enter` and `Esc` keys by default execute the confirm and cancel functions when the `confirm` and `cancel` buttons are displayed | _boolean_ | `true` |
chenjiahan marked this conversation as resolved.
Show resolved Hide resolved

### 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` |
chenjiahan marked this conversation as resolved.
Show resolved Hide resolved

### 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` |
chenjiahan marked this conversation as resolved.
Show resolved Hide resolved

### Events

Expand Down