Skip to content

useOverflow

@astryxdesign/core v0.7.1 · useOverflow

参数 ​

参数类型默认值说明
itemCountMaybeRefOrGetter<number>—要测量的项数。
optionsUseOverflowOptions—溢出行为的配置。
options.gapnumber0项与项的间距,单位像素,参与宽度计算。
options.minVisibleItemsnumber0哪怕挤不下也至少显示的项数。
options.maxVisibleItemsnumber—哪怕都挤得下也不能超过的项数。下限比它大时,下限胜出。
options.maxRowsnumber—最多排几行,剩下的收进指示器。不传或传 1 只排一行。
options.collapseFrom'start' | 'end''end'从哪一头开始收起。
options.behavior'observeParent' | 'observeSelf''observeSelf'量哪一个元素的宽度。observeParent 量父元素的内容宽度,看得见的容器本身可以继续跟着内容收缩。

返回值 ​

名称类型说明
containerRefRef<HTMLElement | null>绑到看得见的容器上。
measureRefRef<HTMLElement | null>绑到屏幕外的测量容器上,里面放全部项。
visibleCountRef<number>看得见的容器里能放下几项。
hasOverflowComputedRef<boolean>是不是有项被收起来了(visibleCount < itemCount)。
rowsRef<number>看得见的项占几行。单行模式是 1,什么都没显示时是 0。
rowHeightRef<number>量到的最大项高,多行容器用它定高度。
remeasure() => void再量一次。测试里改过宽度、或者折叠状态变了之后用得上。

元素版 ​

useOverflow(element, isActive) 是另一个签名。它不量一排项,只量一个盒子:判断这个元素里的内容是不是比它自己的可视区域高,返回一个 Ref<boolean>。isActive 为 false 时它不做测量。

名称类型说明
elementRef<HTMLElement | null>要量的那个盒子的模板 ref。
isActiveRef<boolean>要不要量。为 false 时结果一直是 false。
返回值Ref<boolean>内容是不是比盒子高。