mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-11 11:39:43 +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

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

@ -125,23 +125,24 @@ 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 |
| label-position | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. | ^[enum]`'left' \| 'right' \| 'top'` | right |
| label-width | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported. | ^[string] / ^[number] | — |
| label-suffix | Suffix of the label. | ^[string] | — |
| hide-required-asterisk | Whether to hide required fields should have a red asterisk (star) beside their labels. | ^[boolean] | false |
| require-asterisk-position | Position of asterisk. | ^[enum]`'left' \| 'right'` | left |
| show-message | Whether to show the error message. | ^[boolean] | true |
| inline-message | Whether to display the error message inline with the form item. | ^[boolean] | false |
| status-icon | Whether to display an icon indicating the validation result. | ^[boolean] | false |
| validate-on-rule-change | Whether to trigger validation when the `rules` prop is changed. | ^[boolean] | true |
| 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 |
| 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 |
| label-position | Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. | ^[enum]`'left' \| 'right' \| 'top'` | right |
| label-width | Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported. | ^[string] / ^[number] | — |
| label-suffix | Suffix of the label. | ^[string] | — |
| hide-required-asterisk | Whether to hide required fields should have a red asterisk (star) beside their labels. | ^[boolean] | false |
| require-asterisk-position | Position of asterisk. | ^[enum]`'left' \| 'right'` | left |
| show-message | Whether to show the error message. | ^[boolean] | true |
| inline-message | Whether to display the error message inline with the form item. | ^[boolean] | false |
| status-icon | Whether to display an icon indicating the validation result. | ^[boolean] | false |
| validate-on-rule-change | Whether to trigger validation when the `rules` prop is changed. | ^[boolean] | true |
| 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)
}
}