Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(components): [Scrollbar] Exposes增加scrollPosition和 [Table] Events增加了wrapper-scroll #16478

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

feat(components): [Scrollbar] Exposes增加scrollPosition和 [Table] Events增加了wrapper-scroll #16478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c384f3f
feat(components): [Scrollbar] 和 [Table]
Apr 12, 2024
8e7154f
Merge branch 'dev' into update/table-scroll
Feng-Fred May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 9 additions & 8 deletions docs/en-US/component/scrollbar.md
View file
Open in desktop
Expand Up @@ -75,11 +75,12 @@ scrollbar/manual-scroll

### Exposes

| Name | Description | Type |
| ------------- | ------------------------------------------ | -------------------------------------------------------------------------- |
| handleScroll | handle scroll event | ^[Function]`() => void` |
| scrollTo | scrolls to a particular set of coordinates | ^[Function]`(options: ScrollToOptions \| number, yCoord?: number) => void` |
| setScrollTop | Set distance to scroll top | ^[Function]`(scrollTop: number) => void` |
| setScrollLeft | Set distance to scroll left | ^[Function]`(scrollLeft: number) => void` |
| update | update scrollbar state manually | ^[Function]`() => void` |
| wrapRef | scrollbar wrap ref | ^[object]`Ref<HTMLDivElement>` |
| Name | Description | Type |
| -------------- | ------------------------------------------ | -------------------------------------------------------------------------- |
| handleScroll | handle scroll event | ^[Function]`() => void` |
| scrollTo | scrolls to a particular set of coordinates | ^[Function]`(options: ScrollToOptions \| number, yCoord?: number) => void` |
| setScrollTop | Set distance to scroll top | ^[Function]`(scrollTop: number) => void` |
| setScrollLeft | Set distance to scroll left | ^[Function]`(scrollLeft: number) => void` |
| update | update scrollbar state manually | ^[Function]`() => void` |
| wrapRef | scrollbar wrap ref | ^[object]`Ref<HTMLDivElement>` |
| scrollPosition | scroll position | ^[object]`Ref<{top: number, left: number}>` |
1 change: 1 addition & 0 deletions docs/en-US/component/table.md
View file
Open in desktop
Expand Up @@ -296,6 +296,7 @@ table/table-layout
| current-change | triggers when current row changes | ^[Function]`(currentRow: any, oldCurrentRow: any) => void` |
| header-dragend | triggers after changing a column's width by dragging the column header's border | ^[Function]`(newWidth: number, oldWidth: number, column: any, event: MouseEvent) => void` |
| expand-change | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | ^[Function]`(row: any, expandedRows: any[]) => void & (row: any, expanded: boolean) => void` |
| wrapper-scroll | triggers when scrolling, return distance of scrolling | ^[Function]`({ scrollLeft: number, scrollTop: number }) => void` |

### Table Slots

Expand Down
15 changes: 14 additions & 1 deletion packages/components/scrollbar/src/scrollbar.vue
View file
Open in desktop
Expand Up @@ -82,10 +82,21 @@ const resizeKls = computed(() => {
return [ns.e('view'), props.viewClass]
})

const scrollPosition = ref<{
top: number
left: number
}>({
top: 0,
left: 0,
})

const handleScroll = () => {
if (wrapRef.value) {
barRef.value?.handleScroll(wrapRef.value)

scrollPosition.value = {
top: wrapRef.value.scrollTop,
left: wrapRef.value.scrollLeft,
}
emit('scroll', {
scrollTop: wrapRef.value.scrollTop,
scrollLeft: wrapRef.value.scrollLeft,
Expand Down Expand Up @@ -181,5 +192,7 @@ defineExpose({
setScrollLeft,
/** @description handle scroll event */
handleScroll,
/** @description scroll position */
scrollPosition,
})
</script>
9 changes: 8 additions & 1 deletion packages/components/table/src/table.vue
View file
Open in desktop
Expand Up @@ -63,6 +63,7 @@
:view-style="scrollbarViewStyle"
:wrap-style="scrollbarStyle"
:always="scrollbarAlwaysOn"
@scroll="handleScroll"
>
<table
ref="tableBody"
Expand Down Expand Up @@ -219,8 +220,9 @@ export default defineComponent({
'current-change',
'header-dragend',
'expand-change',
'wrapper-scroll',
],
setup(props) {
setup(props, { emit }) {
type Row = typeof props.data[number]
const { t } = useLocale()
const ns = useNamespace('table')
Expand Down Expand Up @@ -296,6 +298,10 @@ export default defineComponent({

useKeyRender(table)

const handleScroll = (event: { scrollLeft: number; scrollTop: number }) => {
emit('wrapper-scroll', event)
}

return {
ns,
layout,
Expand Down Expand Up @@ -377,6 +383,7 @@ export default defineComponent({
* @description set vertical scroll position
*/
setScrollTop,
handleScroll,
}
},
})
Expand Down