diff --git a/packages/components/_private/overflow/src/Item.tsx b/packages/components/_private/overflow/src/Item.tsx index 25b0161fb..e194b12e8 100644 --- a/packages/components/_private/overflow/src/Item.tsx +++ b/packages/components/_private/overflow/src/Item.tsx @@ -5,7 +5,7 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import { defineComponent, ref } from 'vue' +import { defineComponent, onUnmounted, ref } from 'vue' import { useResizeObserver } from '@idux/cdk/resize' import { callEmit } from '@idux/cdk/utils' @@ -19,6 +19,9 @@ export default defineComponent({ const itemElRef = ref() const handleResize = (entry: ResizeObserverEntry) => callEmit(props.onSizeChange, entry, props.itemKey ?? '') useResizeObserver(itemElRef, handleResize) + onUnmounted(() => { + callEmit(props.onSizeChange, undefined, props.itemKey ?? '') + }) return () => { return ( diff --git a/packages/components/_private/overflow/src/Overflow.tsx b/packages/components/_private/overflow/src/Overflow.tsx index f7476235f..a22ca3206 100644 --- a/packages/components/_private/overflow/src/Overflow.tsx +++ b/packages/components/_private/overflow/src/Overflow.tsx @@ -142,7 +142,7 @@ export default defineComponent({ class={`${mergedPrefixCls.value}-rest`} itemKey={restNodeKey} display={displayRest.value} - onSizeChange={({ contentRect }) => (restWidth.value = contentRect.width ?? 0)} + onSizeChange={entry => (restWidth.value = entry?.contentRect.width ?? 0)} > {nodeContent} @@ -156,7 +156,7 @@ export default defineComponent({ {...itemSharedProps} class={`${mergedPrefixCls.value}-suffix`} itemKey={suffixNodeKey} - onSizeChange={({ contentRect }) => (suffixWidth.value = contentRect.width ?? 0)} + onSizeChange={entry => (suffixWidth.value = entry?.contentRect.width ?? 0)} > {nodeContent} @@ -199,15 +199,11 @@ const useContainerSize = (containerElRef: Ref) => { const useItemSize = () => { const itemsWidthMap = ref>(new Map()) - const setItemWidth = (key: VKey, entry: ResizeObserverEntry) => { - const { - contentRect: { width }, - target, - } = entry - if (!target && itemsWidthMap.value.get(key)) { + const setItemWidth = (key: VKey, entry?: ResizeObserverEntry) => { + if (!entry?.target && itemsWidthMap.value.get(key)) { itemsWidthMap.value.delete(key) - } else if (width) { - itemsWidthMap.value.set(key, width) + } else if (entry?.contentRect.width) { + itemsWidthMap.value.set(key, entry.contentRect.width) } } diff --git a/packages/components/_private/overflow/src/types.ts b/packages/components/_private/overflow/src/types.ts index 9a5b6844b..7ba7bb611 100644 --- a/packages/components/_private/overflow/src/types.ts +++ b/packages/components/_private/overflow/src/types.ts @@ -29,7 +29,7 @@ export const overflowItemProps = { required: true, }, data: Object as PropType, - onSizeChange: Function as PropType<(entry: ResizeObserverEntry, key?: VKey) => void>, + onSizeChange: Function as PropType<(entry: ResizeObserverEntry | undefined, key?: VKey) => void>, } as const export const overflowProps = { diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx index 0fecad1a5..b9a7a8ddc 100644 --- a/packages/pro/search/src/ProSearch.tsx +++ b/packages/pro/search/src/ProSearch.tsx @@ -182,6 +182,10 @@ export default defineComponent({ rest: (rest: (SearchItem | typeof nameSelectOverflowItemKey)[]) => { const restItems = rest.filter(item => item !== nameSelectOverflowItemKey) + if (!restItems.length) { + return + } + return ( {slots.overflowedLabel?.(restItems) ?? `+ ${restItems.length}`} diff --git a/packages/pro/search/src/components/segment/SegmentInput.tsx b/packages/pro/search/src/components/segment/SegmentInput.tsx index a89e65361..08b65dc66 100644 --- a/packages/pro/search/src/components/segment/SegmentInput.tsx +++ b/packages/pro/search/src/components/segment/SegmentInput.tsx @@ -96,7 +96,7 @@ export default defineComponent({ const { class: className, style, ...rest } = attrs return ( - +