mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [form] scroll-into-view options (#12164)

Browse Source
This commit is contained in:
류한경 2023-03-23 22:51:56 +09:00 committed by GitHub
parent 8144dc7361
commit eb88722841
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/en-US/component/form.md
View File

@ -126,7 +126,7 @@ form/accessibility
### Form Attributes
| Name | Description | Type | Default |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------- |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------- |
| model | Data of form component. | ^[object]`Record<string, any>` | — |
| rules | Validation rules of form. | ^[object]`FormRules` | — |
| inline | Whether the form is inline. | ^[boolean] | false |
@ -142,6 +142,7 @@ form/accessibility
| size | Control the size of components in this form. | ^[enum]`'large' \| 'default' \| 'small'` | — |
| disabled | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component. | ^[boolean] | false |
| scroll-to-error | When validation fails, scroll to the first error form entry. | ^[boolean] | false |
| scroll-into-view-options | When validation fails, it scrolls to the first error item based on the scrollIntoView option. [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). | ^[object] / ^[boolean] | — |
### Form Methods

6
packages/components/form/src/form.ts
View File

@ -104,6 +104,12 @@ export const formProps = buildProps({
* @description When validation fails, scroll to the first error form entry.
*/
scrollToError: Boolean,
/**
* @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
*/
scrollIntoViewOptions: {
type: [Object, Boolean],
},
} as const)
export type FormProps = ExtractPropTypes<typeof formProps>
export type FormMetaProps = ExtractPropTypes<typeof formMetaProps>

2
packages/components/form/src/form.vue
View File

@ -145,7 +145,7 @@ const validateField: FormContext['validateField'] = async (
const scrollToField = (prop: FormItemProp) => {
const field = filterFields(fields, prop)[0]
if (field) {
field.$el?.scrollIntoView()
field.$el?.scrollIntoView(props.scrollIntoViewOptions)
}
}