diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md index 3abe956abb..7840888b91 100644 --- a/docs/en-US/component/select.md +++ b/docs/en-US/component/select.md @@ -243,14 +243,15 @@ select/custom-label ### Select Events -| Name | Description | Type | -| -------------- | ------------------------------------------------------------- | ---------------------------------------- | -| change | triggers when the selected value changes | ^[Function]`(value: any) => void` | -| visible-change | triggers when the dropdown appears/disappears | ^[Function]`(visible: boolean) => void` | -| remove-tag | triggers when a tag is removed in multiple mode | ^[Function]`(tagValue: any) => void` | -| clear | triggers when the clear icon is clicked in a clearable Select | ^[Function]`() => void` | -| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` | -| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` | +| Name | Description | Type | +| --------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------- | +| change | triggers when the selected value changes | ^[Function]`(value: any) => void` | +| visible-change | triggers when the dropdown appears/disappears | ^[Function]`(visible: boolean) => void` | +| remove-tag | triggers when a tag is removed in multiple mode | ^[Function]`(tagValue: any) => void` | +| clear | triggers when the clear icon is clicked in a clearable Select | ^[Function]`() => void` | +| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` | +| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` | +| popup-scroll ^(2.9.4) | triggers when dropdown scrolls | ^[Function]`(data:{scrollTop: number, scrollLeft: number}) => void` | ### Select Slots diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue index f004ff3ef4..ad46dec17b 100644 --- a/packages/components/select/src/select.vue +++ b/packages/components/select/src/select.vue @@ -261,6 +261,7 @@ role="listbox" :aria-label="ariaLabel" aria-orientation="vertical" + @scroll="popupScroll" > iconReverse: ComputedRef validateState: ComputedRef + popupScroll: (data: { scrollTop: number; scrollLeft: number }) => void validateIcon: ComputedRef showNewOption: ComputedRef @@ -850,6 +851,10 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => { return { maxWidth: `${states.selectionWidth}px` } }) + const popupScroll = (data: { scrollTop: number; scrollLeft: number }) => { + emit('popup-scroll', data) + } + useResizeObserver(selectionRef, resetSelectionWidth) useResizeObserver(menuRef, updateTooltip) useResizeObserver(wrapperRef, updateTooltip) @@ -915,6 +920,7 @@ export const useSelect: useSelectType = (props: ISelectProps, emit) => { dropdownMenuVisible, showTagList, collapseTagList, + popupScroll, // computed style tagStyle,