blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 05:42:44 +08:00
Code Issues Projects Releases Wiki Activity

feat(Form): add prop "scrollToErrorPosition" (#12937)

Browse Source
This commit is contained in:
pany 2024-06-19 07:53:39 +08:00 committed by GitHub
parent 13e5464ae1
commit 1a6d7ebeb2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/vant/src/form/Form.tsx
View File

@ -34,6 +34,7 @@ export const formProps = {
labelAlign: String as PropType<FieldTextAlign>,
inputAlign: String as PropType<FieldTextAlign>,
scrollToError: Boolean,
scrollToErrorPosition: String as PropType<ScrollLogicalPosition>,
validateFirst: Boolean,
submitOnEnter: truthProp,
showErrorMessage: truthProp,
@ -177,9 +178,17 @@ export default defineComponent({
.then(() => emit('submit', values))
.catch((errors: FieldValidateError[]) => {
emit('failed', { values, errors });
const { scrollToError, scrollToErrorPosition } = props;
if (props.scrollToError && errors[0].name) {
scrollToField(errors[0].name);
if (scrollToError && errors[0].name) {
scrollToField(
errors[0].name,
scrollToErrorPosition
? {
block: scrollToErrorPosition,
}
: undefined,
);
}
});
};

1
packages/vant/src/form/README.md
View File

@ -502,6 +502,7 @@ export default {
| required `v4.7.3` | Whether to show required mark | _boolean \| 'auto'_ | `null` |
| validate-first | Whether to stop the validation when a rule fails | _boolean_ | `false` |
| scroll-to-error | Whether to scroll to the error field when validation failed | _boolean_ | `false` |
| scroll-to-error-position | The position when scrolling to the wrong form item, can be set to `center` \| `end` \| `nearest` \| `start` | _string_ | - |
| show-error | Whether to highlight input when validation failed | _boolean_ | `false` |
| show-error-message | Whether to show error message when validation failed | _boolean_ | `true` |
| submit-on-enter | Whether to submit form on enter | _boolean_ | `true` |

1
packages/vant/src/form/README.zh-CN.md
View File

@ -534,6 +534,7 @@ export default {
| required `v4.7.3` | 是否显示表单必填星号 | _boolean \| 'auto'_ | `null` |
| validate-first | 是否在某一项校验不通过时停止校验 | _boolean_ | `false` |
| scroll-to-error | 是否在提交表单且校验不通过时滚动至错误的表单项 | _boolean_ | `false` |
| scroll-to-error-position | 滚动至错误的表单项时的位置，可选值为 `center` \| `end` \| `nearest` \| `start` | _string_ | - |
| show-error | 是否在校验不通过时标红输入框 | _boolean_ | `false` |
| show-error-message | 是否在校验不通过时在输入框下方展示错误提示 | _boolean_ | `true` |
| submit-on-enter | 是否在按下回车键时提交表单 | _boolean_ | `true` |