javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [select] add popup-scroll event (#19589)

Browse Source 
* 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>
This commit is contained in:
jiaxiang
2025-01-14 15:54:31 +08:00
committed by GitHub
parent 3b2eaed8f3
commit 82aedc86c7
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/en-US/component/select.md
View File

@@ -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

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

@@ -261,6 +261,7 @@
role="listbox"
:aria-label="ariaLabel"
aria-orientation="vertical"
@scroll="popupScroll"
>
<el-option
v-if="showNewOption"
@@ -340,6 +341,7 @@ export default defineComponent({
'visible-change',
'focus',
'blur',
'popup-scroll',
],
setup(props, { emit }) {

6
packages/components/select/src/useSelect.ts
View File

@@ -85,6 +85,7 @@ type useSelectType = (
iconComponent: ComputedRef<string>
iconReverse: ComputedRef<boolean>
validateState: ComputedRef<string>
popupScroll: (data: { scrollTop: number; scrollLeft: number }) => void
validateIcon: ComputedRef<unknown>
showNewOption: ComputedRef<boolean>
@@ -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,