From 073441d21b8aec68e476b03f3d5d1ffb9c50ebd0 Mon Sep 17 00:00:00 2001 From: Zhong Date: Tue, 17 Jun 2025 21:54:52 +0800 Subject: [PATCH] feat(components): [splitter] add collapse event (#21035) * feat(components): [splitter] add collapse event * docs(components): [splitter] add version tag --- docs/en-US/component/splitter.md | 11 ++++++----- packages/components/splitter/src/splitter.vue | 8 +++++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/en-US/component/splitter.md b/docs/en-US/component/splitter.md index fda092f1ec..fb1e9eb1b5 100644 --- a/docs/en-US/component/splitter.md +++ b/docs/en-US/component/splitter.md @@ -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 diff --git a/packages/components/splitter/src/splitter.vue b/packages/components/splitter/src/splitter.vue index 2e50c30aa8..3a6e2a4a25 100644 --- a/packages/components/splitter/src/splitter.vue +++ b/packages/components/splitter/src/splitter.vue @@ -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) },