From 82aedc86c78c769791d643963022d14bbf444fca Mon Sep 17 00:00:00 2001 From: jiaxiang Date: Tue, 14 Jan 2025 15:54:31 +0800 Subject: [PATCH] feat(components): [select] add popup-scroll event (#19589) * feat(components): [select] add popup-scroll event * Update docs/en-US/component/select.md Co-authored-by: btea <2356281422@qq.com> * chore: format --------- Co-authored-by: btea <2356281422@qq.com> Co-authored-by: warmthsea <2586244885@qq.com> --- docs/en-US/component/select.md | 17 +++++++++-------- packages/components/select/src/select.vue | 2 ++ packages/components/select/src/useSelect.ts | 6 ++++++ 3 files changed, 17 insertions(+), 8 deletions(-) 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,