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): [splitter] add collapse event (#21035)

Browse Source 
* feat(components): [splitter] add collapse event

* docs(components): [splitter] add version tag
This commit is contained in:
Zhong
2025-06-17 21:54:52 +08:00
committed by GitHub
parent f50222cb55
commit 073441d21b
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/en-US/component/splitter.md
View File

@@ -67,11 +67,12 @@ splitter/size
### Splitter Events
| Name | Description | type |
| ------------ | ------------------------------------------------------------------------ | ----------------------------------------------------- |
| resize-start | Triggered when starting to resize a panel, `index` is the drag bar index | ^[Function]`(index: number, sizes: number[]) => void` |
| resize | Triggered while resizing a panel, `index` is the drag bar index | ^[Function]`(index: number, sizes: number[]) => void` |
| resize-end | Triggered when panel resizing ends, `index` is the drag bar index | ^[Function]`(index: number, sizes: number[]) => void` |
| Name | Description | type |
| ------------------ | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
| resize-start | Triggered when starting to resize a panel, `index` is the drag bar index | ^[Function]`(index: number, sizes: number[]) => void` |
| resize | Triggered while resizing a panel, `index` is the drag bar index | ^[Function]`(index: number, sizes: number[]) => void` |
| resize-end | Triggered when panel resizing ends, `index` is the drag bar index | ^[Function]`(index: number, sizes: number[]) => void` |
| collapse ^(2.10.3) | Triggered when a panel is collapsed, `index` is the drag bar index | ^[Function]`(index: number, type: 'start' \| 'end', sizes: number[]) => void` |
## SplitterPanel API

8
packages/components/splitter/src/splitter.vue
View File

@@ -15,6 +15,7 @@ const emits = defineEmits<{
(e: 'resizeStart', index: number, sizes: number[]): void
(e: 'resize', index: number, sizes: number[]): void
(e: 'resizeEnd', index: number, sizes: number[]): void
(e: 'collapse', index: number, type: 'start' | 'end', sizes: number[]): void
}>()
const props = defineProps(splitterProps)
@@ -56,6 +57,11 @@ const onResizeEnd = (index: number) => {
emits('resizeEnd', index, pxSizes.value)
}
const onCollapsible = (index: number, type: 'start' | 'end') => {
onCollapse(index, type)
emits('collapse', index, type, pxSizes.value)
}
provide(
splitterRootContextKey,
reactive({
@@ -68,7 +74,7 @@ provide(
onMoveStart: onResizeStart,
onMoving: onResize,
onMoveEnd: onResizeEnd,
onCollapse,
onCollapse: onCollapsible,
registerPanel: (panel: PanelItemState) => {
panels.value.push(panel)
},